在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透明度。