【CSS3 笔记】边框：圆角、阴影、边框图片

admin

border-radius：边框圆角
box-shadow：边框阴影
border-image：边框图片
border-radius：边框圆角
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性（就是设置边框四个角的形状）
四个角的顺序为 左上（top-left）—右上（top-right）—右下（bottom-right）—左下（bottom-left）
例：

1. border-radius:2em;

复制代码

等同于

1. border-top-left-radius:2em;
   
2. border-top-right-radius:2em;
   
3. border-bottom-right-radius:2em;
   
4. border-bottom-left-radius:2em;

复制代码

em的说明：
1.em的值并不是固定的；
2.em会继承父级元素的字体大小。

em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
一般情况下，设置对称的圆角边框形状，只需设置一个值即可。


box-shadow：边框阴影
语法：

1. box-shadow: h-shadow v-shadow blur spread color inset;

复制代码

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

border-image：边框图片
border-image 属性是一个简写属性，用于设置以下属性：
border-image-source：（用在边框的图片的路径。）
border-image-slice：（图片边框向内偏移。）
border-image-width：（图片边框的宽度。）
border-image-outset：（边框图像区域超出边框的量。）
border-image-repeat：（图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。）