css中outline和border的區別

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

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和css3有什麼區別,CSS和CSS3有什麼區別

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

css中如何設定透明度,css中,如何設定前景色的透明度?

娛樂螺螄粉 opacity 0.4 ie9 和非ie透明 background rgba 0,0,0,0.4 背景透明 filter alpha opacity 40 ie6,7,8 鰟鮍魚 50和0.5是透明度,按自己需要修改吧。css box html 透明區域 水煮魚同盟 background...

CSS中定位問題

呵呵,這個好解決!關於官方的解釋下面的回答已經有了,我要說的是如何去更好的理解它們!既然是定位,那麼,就都是圍繞一個 參照點 來說的 要理解fixed就要先理解absolute,因為fixed是absolute的一種 以下是position為absolute的 參照點 標準 如果position的父...