![c099fb31cd1509aa0d92091d2f9ce918.png](https://img-blog.csdnimg.cn/img_convert/c099fb31cd1509aa0d92091d2f9ce918.png)
半透明边框
首先使用background-clip指定绘制区域,然后使用border将边框设置成透明
多重边框
可以采用box-shadow实现,也可以采用outline完成。
box-shadow参数详解:【h-shadow, v-shadow, blur, spread, color, inset】
h-shadow: 水平阴影位置,允许负值,设置0就是不做偏移;v-shadow: 垂直阴影位置,允许负值出现,设置0就是不做偏移;blue: 模糊距离;spread: 阴影半径;color: 阴影的颜色;inset: 如果设置,就是从外层的阴影改变成内侧阴影;
outline参数详解:
outline-offset属性可控制它跟元素边缘之间的间距,这个属性接受负值,比如说实现缝边效果
边框圆角
由于box-shadow可以跟着描边走,而outline则不会跟着描边走,所以如果想得到外方内圆,可以通过box-shadow和outline一起渲染,把之前未覆盖的地方一并渲染到,但是box-shadow的大小也要事宜
图像边框