[CSS揭秘]半透明边框

标签：样式   clip   android   半透明   效果   编辑器   背景颜色   color   round   

技巧：实现一个半透明的边框

补充说明：博客园的编辑器把内联样式里带-分隔符的CSS属性都删掉了，所以页面效果看不到半透明边框。

预备知识 background-clip

background-clip 设置元素背景是否延伸到边框下面，如果没有设置背景颜色或者图片，那么这个属性只有在边框设置为透明或者半透明时才能看到视觉效果。否则这个属性造成的样式变化会被元素边框所覆盖。

默认值为 border-box 没有继承性，也不适用于CSS动画。取值范围 border-box; padding-box; content-box;

浏览器支持

android4.3及以下，不支持background-size

在safari浏览器上支持 -webkit-background-clip: text

默认情况下，一个容器的背景会延伸到边框所在的区域下层。通过background-clip属性可以调整背景的侵入范围。

border: 10px hsla(0,0%,100%,.5);

background: #fff;

background-clip: padding-box;

参考案例地址：

play.csssecrets.io/translucent-borders

[CSS揭秘]半透明边框

标签：样式   clip   android   半透明   效果   编辑器   背景颜色   color   round   

原文地址：http://www.cnblogs.com/joyjoe/p/6111708.html