CSS3學習筆記 顏色相關樣式

2021-08-25 14:48:16 字數 621 閱讀 6310

利用alpha通道來設定顏色

c3中可以通過alpha通道的方法來定義rgba顏色;

rgba顏色:指的是紅色值、綠色值、藍色值、alpha通道值來定義的顏色

通道範圍為0-1.0,0表示完全透明,1表示不透明;

background-color:rgba(255,0,0,0.5);

hsla顏色指的是利用色調(h)、飽和度(s)、亮度(l)、alpha通道(a)來定義顏色;

色調值:用0或360表示紅色;120表示綠色;240表示藍色;

飽和度和亮度的取值範圍均為0%到100%;

background-color:hsla(120,100%,50%,0.5);

opacity屬性用來指定透明度的,取值範圍在0-1,0表示完全透明,1表示不透明;

alpha通道對元素設定透明度時,可以單獨對元素的背景色和文字顏色等指定透明度;而opacity屬性只能指定整個元素的透明度;

transparent屬性會將背景、文字、或邊框等的顏色設定為完全透明,相當於使用了值為0的alpha通道;

c3中可以在一切指定顏色值的屬性中指定transparent值;

CSS3學習筆記(三) 顏色

1 alpha透明度引數 body2 漸變色彩 gradient 線性漸變 linear 向下 向上 向左 向右 對角方向 徑向漸變 radial 由它們的中心定義 線性漸變 預設從上到下 語法 至少定義兩種顏色結點 background linear gradient direction,colo...

CSS3學習筆記 之 邊框顏色

css2中的邊框主要有三個型別值 border width 設定元素邊框的粗細 border color 設定元素邊框的顏色 border style 設定元素邊框的型別 這三個值中唯一需要的是border style,否則邊框樣式起不到效果。也可以為不同的邊框設定不同的風格,遵守t r b l原則...

css3新學習樣式

css3 1 旋轉角度 transform rotate 30deg 旋轉30度 2 圓角邊框 由小到大 border radius 25px moz border radius 25px old firefox 3 邊框陰影 box shadow box shadow 10px 10px 5px ...