Tagged

border-image

A collection of 2 posts

border-color

css3笔记——边框border

一,border-color css1中便有border-color属性,css3中增强了其功能,其值为,支持多个颜色设置,如果设置n个颜色值,且边框宽度为n像素,那么每个颜色占1个像素,依次显示在边框上。若边框宽度像素数量大于颜色个数,则除最后一个颜色外,其余颜色占1个像素的宽度,其余宽度被最后一个颜色占有。 border-color派生的子属性: border-top-color border-right-color border-bottom-color border-left-color 而对于边框的宽度不同情况如下图示 [![border](https://image.hicc.pro/wp-content/uploads/2012/09/border1.jpg "border1")](https://image.hicc.pro/wp-content/uploads/2012/09/border1.jpg)border 此种情况各个边框在分界处的角度与边框宽度的比例成正比。 还需要注意的是,在同时写了border-color和其派生的属性的情况下,对于支持css3的浏览器,派生属性的优先级高,不支持其css3属性的浏览器忽略派生属性,但是若同时有单一颜色的border-color(

border-image

css3笔记——border-image-slice属性介绍以及各个浏览器的不同呈现

在css3中新增了border-image属性,用来定义边框的背景,它有很多的子属性,比较难理解与操作的便是border-image-slice属性,border-image-slice定义了如如何slice背景图像,使之以不同的方式装饰边框。 borde-image-slice属性值比较特殊,也是需要小心控制的地方。 属性值不带单位,默认为px。 支持百分比值。百分比值是相对背景图的大小,譬如widthheight的背景图,设置slice属性为10%后,其实际的属性值为height10%  width10%   height10%  width*10% 其工作的原理可以理解为:首先根据四个属性值a b c d按顺时针方向确定四个点(ad左上A点、ab右上B点、bc右下C点、cd坐下D点),然后再根据box的大小,将背景图根据A、B、C、D四个点缩放或者拉伸至box的四个角,最后在根据border-width的值确定边框的粗细。 属性的四个值的大小(a+c相对于背景图height的大小、b+d相对于背景图width的大小)对边框的呈现有很大的关系,不同情况会有不一样的呈现(由下面的demo以及图列也能看出一二),可从上条的工作原理深入理解,特别注意极限的情况(有点数学的味道)。当然多变带来出彩~^~ 在实际应用的时候其css代码可以这样书写: -webkit-border-image:url(