提到邊框，大家首先想到的是CSS的boder屬性。不錯(cuò)，border屬性是CSS種盒模型基礎(chǔ)屬性之一。在CSS3中，關(guān)于邊框的運(yùn)用會(huì)有什么樣的不同之處呢？又將如何使用？本章我們帶著這些問題開始我們的CSS3邊框之旅。
3.1 CSS3邊框簡(jiǎn)介
border屬性在CSS1中就已經(jīng)定義了，使用它可以設(shè)置元素的邊框風(fēng)格。
3.1.1 邊框的基本屬性
CSS1和CSS2中的邊框?qū)傩源_實(shí)很簡(jiǎn)單，其主要包括三個(gè)類型值。
-
border-width：設(shè)置元素邊框的粗細(xì)。 -
border-color：設(shè)置元素邊框的顏色。 -
border-style：設(shè)置元素邊框的類型。
在實(shí)際中可以將上面三個(gè)屬性合并在一起，其縮寫語法如下：
border: border-width border-style border-color;
縮寫后的每個(gè)屬性之間使用空格隔開，而且它們之間沒有先后順序，可這里三個(gè)值中唯一需要的值是“border-style”。
3.1.2 邊框的類型
| 屬性值 | 功能描述 | 示例代碼 |
|---|---|---|
none |
定義無邊框 | .ele{border:none;} |
hidden |
與"none"相同，不過應(yīng)用于表時(shí)除外，對(duì)于表，hidden用于解決邊框沖突 |
.ele{border:hidden;} |
dotted |
定義點(diǎn)狀邊框 | .ele{border: 3px dotted red;} |
dashed |
定義虛線邊框 | .ele{border: 3px dashed red;} |
solid |
定義實(shí)線邊框 | .ele{border: 3px solid red;} |
double |
定義雙線。雙線的寬度等于border-width的值 |
.ele{border: 3px double red;} |
groove |
定義3D凹槽邊框，其效果取決于border-color的值 |
.ele{border: 3px groove red;} |
ridge |
定義3D壟狀邊框，其效果取決于border-color的值 |
.ele{border: 3px ridge red;} |
inset |
定義3Dinset邊框，其效果取決于border-color的值 |
.ele{border: 3px inset red;} |
outset |
定義3Doutset邊框，其效果取決于border-color的值 |
.ele{border: 3px outset red;} |
inherit |
規(guī)定應(yīng)該從父元素繼承邊框樣式。部分瀏覽器不支持這個(gè)屬性值 | .ele{border: 3px inherit red;} |
chrome
chrome
360安全瀏覽器急速模式
360安全瀏覽器急速模式
360安全瀏覽器兼容模式
360安全瀏覽器兼容模式
firefox
firefox
IE11
IE11
IE10
IE10
IE9
IE9
IE8
IE8
IE7
IE7
上面IE78910均未使用原生IE測(cè)試，而是使用了IE11自帶的IE78910進(jìn)行的測(cè)試。
