border:<line-width> || <line-style> || <color>
默認值:看每個獨立屬性
適用于:所有元素
繼承性:無
動畫性:看每個獨立屬性
計算值:看每個獨立屬性
媒 體:視覺
border-top, border-right, border-bottom, border-left:<line-width> || <line-style> || <color>
默認值:看每個獨立屬性
適用于:所有元素
繼承性:無
動畫性:看每個獨立屬性
計算值:看每個獨立屬性
媒 體:視覺
下屬獨立屬性:border-*-width || border-*-style || border-*-color
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
如使用border
或border-*
短屬性只定義了單個參數值,則其他參數的默認值將無條件覆蓋各自對應的單個屬性值定義。
舉個例子:
.demo {
border: 1px dashed red;
border: solid;
}
獨立屬性被短屬性定義覆蓋示例
這個例子中,定了 2 次 border 屬性,第 1 次為 .demo 定義了 1px 的虛線紅色邊框,第 2 次定義了邊框樣式為實線(只定義單個參數值),由于 border 是復合短屬性,第 1 次定義的邊框厚度和邊框顏色都會被 border 的默認值給覆蓋掉,所以最終會顯示為 3px 的實線黑色邊框
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 8.0+ | 40.0+ | 40.0+ | 8.0+ | 40.0+ | 8.0+ | 4.4+ | 28.0+ |