了解CSS3边框圆角、边框阴影及边框图片的使用

边框圆角

border-radius: 50%;

这里的50%是谁的50%？

其实是正方形边长的50%

border-radius: 10px 20px 15px 5px;
/* 左上角圆角的半径  右上角圆角的半径  右下角圆角的半径  左下角圆角的半径 */

border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
/*
前面四个值  是控制四个方向的横轴
后面四个值  是控制四个方向的纵轴
横轴的50%是宽度的50%
纵轴的50%是高度的50%
*/

当圆角半径大于边框的时候，内容区会开始出现圆角。

边框阴影

box-shadow: 0px 0px 3px #000;
/* 水平偏移量  垂直偏移量  模糊度  颜色 */

一个盒子是可以有多个边框阴影的

box-shadow: 0px 0px 0px 10px #000,
            20px 20px 0px 10px #000;
/* 水平偏移量  垂直偏移量  模糊度  向外延伸值  颜色 */

边框图片

border-image-source：设置边框图片的资源位置

border-image-slice：设置切割图片的方式

　　fill：设置盒子中间是否使用图片填充

border-image-width：设置边框图片的宽度

border-image-repeat：设置边框图片的平铺方式

　　repeat：平铺

　　stretch：拉伸

border-image-outset：设置边框图的扩展

注意：想要让边框图能够显示，至少需要border-style属性