半透明边框

?> 背景知识：:point_right: background-clip

默认情况下，背景的颜色会延伸至边框下层，这意味着我们设置的透明边框效果会被覆盖掉，在css3中，我们可以通过设置background-clip:padding-box来改变背景的默认行为，达到我们想要的效果。

<script v-pre type="text/x-template" id="translucent-borders"> <style> main{ width: 100%; padding: 60px 80px 80px; background: #b4a078; } div{ padding: 12px; margin: 20px auto; background: white; border: 10px solid hsla(0, 0%, 100%, .5); } label{ color: #f4f0ea; } input[id="pb"]:checked ~ div{ background-clip: padding-box; } </style> padding-box(默认)

A paragraph of filler text. La la la de dah de dah de dah de la.

<script> </script> </script>

浏览器支持

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=background-img-opts&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="458px"></iframe>