CSS顏色屬性,邊框屬性

2021-07-11 22:18:37 字數 2161 閱讀 6800

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 綠色...