translucent-borders.md

Translucent borders

?> Background：:point_right: background-clip

By default, the color of the background will reach the lower layer of the border, which indicates the translucent border effect set previously will be covered. CSS3 allows us to change the default behavior of the background by setting the background-clip:padding-box to accomplish what we require.

<script v-pre type="text/x-template" id="translucent-borders_tpl"> <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(default)

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

<script> </script> </script>

Browser Support

<iframe width="100%" height="458px" 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"> </iframe>