css中outline和border的區別

時間 2021-10-14 20:14:39

1樓:匿名使用者

1.border

設定元素主要的邊框屬性,包括border-width、border-style、border-color,可預設,無固定順序。

e.g.

[css] view plaincopy

border: red 10px solid;

border: 5px blue;

border-style

統一設定元素各邊框的格式,按照css順序規則。可取的值如下表所示:

css順序規則:當值有4個時,依次按照上、右、下、左設定;當值有3個時,依次按照上、左右、下設定;當值有2個時,依次按照上下、左右設定;當值只有1個時,則為4個方向設定為相同的值。以本屬性為例:

[css] view plaincopy

border-style: soliddotted dashed double;

/* 上邊框為實線

右邊框為點狀

下邊框為虛線

左邊框為雙線

*/border-style: solid dotteddashed;

/* 上邊框為實線

左右邊框為點狀

下邊框為虛線

*/border-style: soliddotted;

/* 上下邊框為實線

左右邊框為點狀

*/border-style: solid;

/* 4個方向的邊框都是實線

*/border-style的預設值為border-style:none。

border-width

統一設定元素各邊框的寬度,按照css順序規則。只有當border-style不為none時才有效。不能設定為負值。

值可以是thin(細)、medium(中等)、thick(粗),也可以是數值。預設為border-width: medium。

border-color

統一設定元素的各邊框顏色,按照css順序規則。當border-style為none或hidden時失效,所以在設定邊框顏色前需要保證border-style的值不為none、hidden。值可以是任意css支援的顏色值。

預設為border-color: transparent。

border-top、border-right、border-bottom、border-left

設定元素的上/右/下/左邊框的主要屬性,包括border-***-style、border-***-color、border-***-width,可預設,無固定順序。

border-top-style、border-right-style、border-bottom-style、border-left-style

設定元素上/右/下/左邊框的樣式,取值與border-style相同,預設為none。

border-top-width、border-right- width、border-bottom-width、border-left- width

設定元素上/右/下/左邊框的寬度,取值與border-width相同。只有當border-***-style不為none時才有效,不能為負值,預設為medium。

border-top-color、border-right- color、border-bottom-color、border-left- color

設定元素上/右/下/左邊框的顏色,取值與border-color相同。只有當border-***-style不為none和hidden時才有效。預設為transparent。

2.outline(輪廓)

在元素邊框邊緣的外圍繪製一條包圍元素的線,包括outline-color、outline-style、outline-width三個子屬性的設定,可預設,無固定順序。輪廓不佔據頁面空間,也不一定是矩形。

除了ie以外的瀏覽器都直接支援outline。只有規定了!document之後的ie8以上版本的瀏覽器才支援outline。

e.g.

[css] view plaincopy

outline: solid black;

outline: dotted thin #0000ff;

outline-style

設定元素輪廓的格式,其取值與border-style類似,但沒有hidden值。預設為none,無輪廓。

outline-width

設定元素輪廓的寬度,其取值與border-width類似。只有當outline-style不為none時才有效。預設為medium。

outline-color

設定元素輪廓的顏色,其取值與border-color類似。只有當outline-style不為none時才有效。預設為transparent。

總結:這兩者的區別有:

1.outline是不佔空間的,既不會增加額外的width或者height

2.outline有可能是非矩形的

2樓:匿名使用者

1.outline是不佔空間的,既不會增加額外的width或者height

2.outline有可能是非矩形的

3樓:短髮丫頭

css裡面outline不經常用,border就邊框

佔用寬度

outline和border的區別

4樓:明雅懿

1.outline是不佔空間的,既不會增加額外的width或者height2.outline有可能是非矩形的 border 就是普通邊框 各有各的用處

border與outline的區別是什麼?一直都不是很清楚,下面我的寫法的理解是對的麼?請高手指點

css中的onmouseover和hover有什麼區別

du瓶邪 如果是寫在.hover是選擇符,意思為,類名為hover的標籤。如 hover 一般不建議以這樣的方式命名,而 hover 是指 偽類,如a標籤的偽類,a hover表示,滑鼠滑過 超連結的時候,字型顏色變化。 onmouseover是event 物件的一個屬性,hover這是一個css的...

css和css3有什麼區別,CSS和CSS3有什麼區別

就是多了很多新的屬性,但向後相容css2和css,具體可以去w3school上看 http www.w3school.com.cn css3 css3 intro.asp 增加了點屬性,丟棄了點兒屬性,注意用法的改變就行了。沒什麼大區別,會css看看css3就行。 都是網頁樣式code,不同的在於c...

CSS中如何新增特效字型,CSS中如何新增特效字型

你好!如果你要將特殊的字型加到css中,而且 訪問時也可以顯示出來的話,那你必須將字型檔案也一同上傳上去,這樣才能讓字型載入進入 不過這樣一來你 載入速度就會慢掉。通常情況下,如果是大容量的字型檔案載入進入 好你必須加一段載入頁面的js 要不然你的 載入速度會非常的慢,會影響 的瀏覽效果。所以我覺得...