第93天：CSS3 中边框详解

CSS3边框详解

其中边框圆角，边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征，我们需要重点掌握。

一，边框圆角

 border-radius    每个角可以设置两个值，x值，y值

圆角处理时，脑中要形成圆，圆心，横轴，纵轴的概念，正圆是椭圆的一种特殊情况。

 

柯林斯椭圆分别设置长，短半径，以“/”进行分隔，遵循“1,2,3,4”规则，“/”前面的1〜4个用来设置横轴半径（分别对应横轴1， 2,3,4位置），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1,2,3,4位置）

二，边框阴影

箱阴影   与文本/阴影用法差不多

1，水平偏移量正值向右负值向左 ;

2，垂直偏移量正值向下负值向上 ;

box-shadow：5px 5px 27px红色，-5px -5px 27px绿色;

3，模糊度是不能为负值;

4，inset可以设置内阴影;

设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

设置可以多重边框阴影，实现更好的效果，增强立体感。

三，边框图片

  border-image：url（“images / border.png”）27 / 20px round

   边界图像 设置边框的背景图片。

　border-image- source：url（“”）设置边框图片的地址。

    border- image - slice：27,27,27,27   //裁剪图片，如何去裁切图片，浏览器会自动去裁剪图片。

    border-image- width：20px;  //指定边框的宽度。

 轮    会自动调整缩放比例

   重复   （重复）

    border-image-repeat：stretch; //边框平铺的样式  拉伸  拉伸 

 

设置的图片将会被“切割”成九宫格形式，然后进行设置。如下图

 

 

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，

其中四个角位置，形状保持不变，中心位置水平垂直两个方向平铺。如下图

 

 

1，圆形和重复之间的区别

轮会自动调整尺寸，完整显示边框图片，如下图。

 

重复单纯平铺多余部分，会被“裁切”而不能完整显示，如下图。

 

2，更改裁切尺寸

background-slice：34 36 27 27分别设置裁切如下图

 

 

 

关于边框图片重点理解9 宫格的裁切及平铺方式，实际开发中应用不广泛，但是如能灵活动用会给我们带来不少便利。