CSS3 CSS3外輪廓屬性

2021-07-10 03:57:37 字數 1229 閱讀 8236

外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似,但和元素邊框border完全不同,外輪廓線不占用網頁布局空間,不一定是矩形,外輪廓是屬於一種動態樣式,只有元素獲取到焦點或者被啟用時呈現。

outline屬性早在css2中就出現了,主要是用來在元素周圍繪製一條輪廓線,可以起到突出元素的作用。但是並未得到各主流瀏覽器的廣泛支援,在css3中對outline作了一定的擴充套件,在以前的基礎上增加新特性。outline屬性的基本語法如下:

outline: [outline-color] || [outline-style] || [outline-width] || [outline-offset] || inherit

從語法中可以看出outline和border邊框屬性的使用方法極其類似。outline-color相當於border-color、outline-style相當於border-style,而outline-width相當於border-width,只不過css3給outline屬性增加了乙個outline-offset屬性,其取值說明如下。

屬性值

屬性值說明

outline-color

定義輪廓線的顏色,屬性值為css中定義的顏色值。在實際應用中,可以將此引數省略,省略時此引數的預設值為黑色。

outline-style

定義輪廓線的樣式,屬性為css中定義線的樣式。在實際應用中,可以將此引數省略,省略時此引數的預設值為none,省略後不對該輪廓線進行任何繪製。

outline-width

定義輪廓線的寬度,屬性值可以為乙個寬度值。在實際應用中,可以將此引數省略,省略時此引數的預設值為medium,表示繪製中等寬度的輪廓線。

outline-offset

定義輪廓邊框的偏移位置的數值,此值可以取負數值。當此引數的值為正數值,表示輪廓邊框向外偏離多少個畫素;當此引數的值為負數值,表示輪廓邊框向內偏移多少個畫素。

inherit

元素繼承父元素的outline效果。

w3c中的定義:

outline-offset 屬性對輪廓進行偏移,並在超出邊框邊緣的位置繪製輪廓。

輪廓與邊框有兩點不同:

這個 div 在邊框之外 15 畫素處有乙個輪廓。

css **如下:

規定邊框邊緣之外 15 畫素處的輪廓:

div

CSS3外輪廓屬性

外輪廓outline在頁面中呈現的效果和邊框border呈現的效果極其相似,但和元素邊框border完全不同,外輪廓線不占用網頁布局空間,不一定是矩形,外輪廓是屬於一種動態樣式,只有元素獲取到焦點或者被啟用時呈現。outline屬性早在css2中就出現了,主要是用來在元素周圍繪製一條輪廓線,可以起到...

CSS邊框和外輪廓

css 邊框 css 邊框 border 可以是圍繞元素內容和內邊距的一條或多條線,對於這些線條,您可以自定義它們的樣式 寬度以及顏色。使用css邊框屬性,我們可以建立出比html中更加優秀的效果 邊框寬度 您可以通過 border width 屬性為邊框指定寬度。為邊框指定寬度有兩種方法 可以指定...

CSS3 CSS3新特性 2D轉換

什麼是轉換 transform 轉換可以理解為變形,可以實現元素的移動 translate 旋轉 rotate 縮放 scale 等效果 移動 translate transform translate x,y 總寫 transform translatex n transform translat...