css使用rgba()或hsla()设置半透明或完全透明边框border

站长手记 作者: 2024-08-28 12:10:01
在css中我们想实现透明颜色,首先就会想到rgba()和hsla()这2个属性。这篇文章就简单介绍下使用这2种方式来实现半透明边框。

1、使用rgba方式:

border: 10px solid rgba(255,255,255,.5);

2、使用hsla方式:

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

HSLA(H,S,L,A) 的参数说明:

H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360 S:Saturation(饱和度)。取值为:0.0% - 100.0% L:Lightness(亮度)。取值为:0.0% - 100.0% A:Alpha透明度。取值0~1之间。 注:此色彩模式与HSL相同,只是在HSL模式上新增了Alpha透明度。
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70113.html
css rgba() hsla() border