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

 2016-09-24 10:42

相信大家都尝试用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;

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

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论: