边框圆角
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属性