CSS3资料之边框

◆ 边框圆角：

属性：border-radius

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

如图所示，我们将四个角标记成1、2、3、4，，CSS里提供了border-radius来
分别设置这些角横纵轴半径，以“/”进行分隔，遵循“1，2，3，4”规则。“/”前面的
1-4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1-4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）。

border-radius: 60px 60px 60px 60px/ 120px 120px 120px 120px ;

/*简化*/
border-radius: 60px/120px;

半径设置可以使用百分比：

border-radius: 50%;

复合写法，遵循遵循“1，2，3，4”规则，如果某个角没有设置，那么默认和对角的设置一样：

1、border-radius: 10px; 表示四个角的横纵轴半径都为10px；

2、border-radius: 10px 5px; 表示1和3角横纵轴半径都为10px，2和4角横纵轴半径为5px；

3、border-radius: 10px 5px 8px; 表示1角模纵轴半径都为10px，2和4角横纵轴半径都为5px，3角的横纵轴半径都为8px；

4、border-radius: 10px 8px 6px 4px; 表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；

指定某个角的边框圆角：

/*单个属性 : 水平半径 垂直半径*/
border-top-left-radius: 60px 120px;
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;

◆ 边框阴影：

属性：box-shadow

与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。

/*box-shadow: 水平位移 垂直位移  模糊程度  阴影大小 阴影颜色 外/内阴影(inset)  外阴影不用写 */

box-shadow: 15px 21px 48px -2px #666;

• 水平偏移量：正值向右，负值向左；
• 垂直偏移量：正值向下，负值向上；
• 模糊度：不能为负值；
• 阴影大小
• 阴影颜色
• 外/内阴影(inset)，外阴影不用写

注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强。

◆ 边框图片：

注：谷歌显示异常

如图所示，设置的图片将会被“切割”成九宫格形式，其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺或拉伸。

属性详情：

• border-image-source: 边框图片路径

border-image-source: url("images/border.png");

• border-image-slice: 边框图片裁剪

border-image-slice: 27;

• border-image-width: 边框图片宽度
  设置边框背景区域的大小，这个值的大小不会影响到盒子的大小

border-image-width: 27px;

• border-image-repeat: 边框图片平铺，正常平铺可能会显示不完整
  1、repeat: 单纯平铺，多余部分会被“裁切”而不能完整显示
  2、round: 会自动调整尺寸，完整显示边框图片
  3、stretch: 拉伸

border-image-repeat: stretch;