半透明边框
border: 10px solid hsla(0,0%,100%,.5);
background: white;
因为background-clip默认为border-box所以无法实现半透明边框效果。
此时应改为padding-box即可实现效果。
多重边框
使用box-shadow实现。
background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
值得注意的是这样实现的边框不会影响布局，不会响应鼠标悬停、点击等事件，但是你可以通过内边距或外边距来额外模拟出边框所需要占据的空间从而达到效果。
使用outline实现。
background: yellowgreen;
border: 10px solid #655;
outline: 5px solid deeppink;
好处在于可用outline-offset 属性来控制它跟元素边缘之间的间距，且该方法更灵活，得到的边框实际存在。但只能实现2层边框。
原文：https://www.cnblogs.com/cuiwan/p/10492218.html