CSS新手入门笔记整理：CSS3边框样式

圆角效果：border-radius

语法

元素{border-radius:取值;}

border-radius 属性取值是一个长度值，单位可以是 px、em 和百分比等。

border-radius的四个取值

/*设置 1 个值,表示 4 个角的圆角半径都是 10px*/
border-radius:10px;
/*设置 2 个值,表示左上角和右下角的圆角半径都是 10px，右上角和左下角的圆角半径都是 20px。*/
border-radius:10px 20px
/*设置 3 个值,表示左上角的圆角半径是 10px，左下角和右上角的圆角半径都是 20px，右下角的是30px*/
border-radius:10px 20px 30px;
/*设置 4 个值,表示左上角、右上角、右下角和左下角的圆角半径依次是 10px、20px、30px、40px*/
border-radius:10px 20px 30px 40px;

• border-top-right-radius ：右上角。
• border-bottom-right-radius ：右下角。
• border-bottom-left-radius ：左下角。
• border-top-left-radius ：左上角。

---

边框阴影：box-shadow

语法

元素{box-shadow:x-offset y-offset blur spread color style;}

• x-offset：定义水平阴影的偏移距离，可以使用负值。
• y-offset：定义垂直阴影的偏移距离，可以使用负值。
• blur：定义阴影的模糊半径，只能为正值。
• spread：定义阴影的大小。
• color：定义阴影的颜色。
• style：定义是外阴影还是内阴影。当取值为outset时（默认值），表示外阴影；当取值为inset时，表示内阴影。

---

4个方向阴影独立样式

可以使用box-shadow属性为4个方向的边框定义独立的阴影效果。其中每条边的阴影属性值之间用英文逗号隔开。

语法

元素{box-shadow:
  -5px 0 12px red,   /*左阴影*/
  0 -5px 12px yellow,/*上阴影*/
  0 5px 12px blue,   /*下阴影*/
  5px 0 12px green;} /*右阴影*/

---

多色边框：border-colors

语法

元素{
border-width:数值;
  
border-top-colors:颜色值;
border-right-colors:颜色值;
border-bottom-colors:颜色值;
border-left-colors:颜色值;} 

如果边框宽度（即border-width）为n个像素，则该边框可以使用n种颜色，即每像素显示一种颜色。

---

边框背景：border-image

• 图片路径 url()。
• 切割宽度：4条边的切割宽度，依次为上边、右边、下边、左边（顺时针）。
• 平铺方式：有3种取值，分别为repeat、round和stretch。

属性值	说明
repeat	取值为repeat时，表示4条边的小方块会不断重复，超出元素部分将会被剪切掉。
round	取值为round时，表示4条边的小方块会铺满。为了铺满，边框图片会压缩或拉伸。
stretch	取值为stretch时，表示4条边的小方块会拉伸，边长有多长就拉多长。

---

border-image的派生子属性

border-image属性可以分开，分别为4条边设置相应的背景图片。

属性	说明
border-top-image	定义上边框背景图片
border-bottom-image	定义下边框背景图片
border-left-image	定义左边框背景图片
border-right-image	定义右边框背景图片

---