纯CSS手工完美实现理想的半透明边框

纯CSS手工完美实现理想的半透明边框

 2016-09-24 10:42    网页设计   安南子   874    发表评论

相信大家都尝试用CSS来做过一些半透明的颜色，比如：rgba()、hsla()。当然，在我们还需要做好回退机制，加载shim脚本，甚至在IE下还需要用到恶心的滤镜效果。尽快半透明颜色很受欢迎，但人们使用基本还集中在背景上。这是有一些原因的：

• 一些早期尝试者并没有意识到这些新的颜色格式也是真正的颜色；

• 做背景方案回退机制要容易的多；

• 在其他属性中使用半透明并没有想象中那么容易。
  

需要解决的问题

虽然在border-color上能运用rgba()、hsla()设置边框为半透明或完全透明(第二行)，如果元素设置了背景颜色或背景图片的时候，会直接影响边框的透明颜色效果(第一行)。特别是，要看到边框底下的内容时。造成这个现象是由于背景图片会延伸到边框底部。现在如果我实现第三行结果呢？

        第一行是错误的结果

        第二行不是我们想要的结果

        第三行才是真正意义上的半透明边框

解决方案

虽然在第一行里我们没看到半透明，但用工具查看元素时会发现边框border是真实存在的。默认情况下，背景会延伸到边框所在的区域下层，但我们可以通过background-clip属性来调整上面的不便。

border:10px solid hsla(0,0%,100%,.5);
background:white;
background-clip:padding-box;

这样，就可以实现完美的半透明边框效果了！