在css中我們想實現透明顏色，首先就會想到rgba()和hsla()這2個屬性。這篇文章就簡單介紹下使用這2種方式來實現半透明邊框。
1、使用rgba方式：
1 border: 10px solid rgba(255,255,255,.5);
51220網站目錄 https://www.51220.cn
說明：rgba分別對應紅綠藍和透明值，其中rgb區間為0（純黑）至255（純色）透明度a區間為0（完全透明）至1不透明。
2、使用hsla方式：
1 background: white; 2 border: 10px solid hsla(0, 0%, 100%, .5); 3 background-clip: padding-box;
說明：默認情況下，背景的顏色會延伸至邊框下層，在css3中，我們可以通過設置background-clip:padding-box來改變背景的默認行為，達到我們想要的效果。
HSLA(H,S,L,A) 的參數說明：
H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360S：Saturation(飽和度)。取值為：0.0% - 100.0%L：Lightness(亮度)。取值為：0.0% - 100.0%A：Alpha透明度。取值0~1之間。注：此色彩模式與HSL相同，只是在HSL模式上新增了Alpha透明度。