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的父...