半透明边框
?> 背景知识：
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>
