color name 顏色英文名稱命名
hex方式 十六進製制方式
rgb方式 三原色配色方式
r: red 紅色 0-255/%
g: green 綠色 0-255/%
b: blue 藍色 0-255/%
a: alpha 透明度 0~1之間
語法:rgba(r,g,b,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之間
語法:hsla(h,s,l,a)
hsl色輪
例項:border實現三角箭頭、風車等
透明度:
opacity
取值:0-1之間
注:低版本的
ie
瀏覽器不相容
,
需用
ie
瀏覽器的濾鏡實現相同效果,
filter:alpha(opacity=50)
對於低版本的火狐瀏覽器需新增核心字首,
-moz-
opacity
thin 細的
medium 預設的
thick 粗的
不常用
數值px
solid 實線型
dotted 點狀
dashed 虛線
double 雙線
border: 1px solid #000;
border-top: 1px solid #000;上邊框
border-top-width
border-top-style
border-top-color
border-right:
border-bottom:
border-left:
none 沒有
url() 路徑
border-image-slice:的分割方式
從上,右,下,左方位來分隔影象,將影象分成4個角,4條邊和中間區域共9份,中間區域始終是透明的(即沒影象填充),除非加上關鍵字 fill。
取值:number: 邊框寬度。不允許負值。
%: 用百分比指定寬度。不允許負值。
border-image-slice:20 fill;
border-image-width:的寬度(不計算在盒子模型寬高內,谷歌會自動加3px)
具體長度或浮點數值
百分比
auto 此情況下與border-image-slice相同
注:此值的大小不會累加到盒子模型之上,
chrome
會有3px
的大小,其餘瀏覽器
border
的大小依然為0
border-image-repeat:
stretch: 拉伸方式來填充邊框背景圖。
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
CSS邊框屬性
這個屬性用來設定上下左右邊框的風格,它的值如下 這個屬性用來設定上下左右邊框的寬度,它的值如下 演示示例 分別用medium,thin,thick和長度單位定製的css邊框寬度屬性示例 這個屬性用來設定上下左右邊框的顏色。例句如下 d5 演示示例 這個屬性是邊框屬性的乙個快捷的綜合寫法,它包含bor...
CSS邊框屬性
這個屬性用來設定上下左右邊框的風格,它的值如下 這個屬性用來設定上下左右邊框的寬度,它的值如下 演示示例 分別用medium,thin,thick和長度單位定製的css邊框寬度屬性示例 這個屬性用來設定上下左右邊框的顏色。例句如下 d5 演示示例 這個屬性是邊框屬性的乙個快捷的綜合寫法,它包含bor...
css顏色屬性
1.在css中如何通過color屬性來修改文字顏色 格式 color 值 取值 1.1英文單詞 一般情況下常見的顏色都有對應的英文單詞,但是英文單詞能夠表達的顏色是有限制的,也就是說不是所有的顏色都能夠通過英文單詞來表達 1.2rgb rgb其實就是三原色,其中r red 紅色 g green 綠色...