border

簡寫屬性語法:

border<line-width> || <line-style> || <color>

預設值看每個獨立屬性

適用於:所有元素

繼承性:無

動畫性:看每個獨立屬性

計算值:看每個獨立屬性

媒 體:視覺

分拆簡寫屬性語法:

border-*<line-width> || <line-style> || <color>

border-* = border-top,border-right,border-bottom,border-left

預設值看每個獨立屬性

適用於:所有元素

繼承性:無

動畫性:看每個獨立屬性

計算值:看每個獨立屬性

媒 體:視覺

下屬獨立屬性border-*-width || border-*-style || border-*-color

取值:

<line-width>
定義元素的邊框厚度。
<line-style>
定義元素的邊框樣式。
<color>
定義元素的邊框顏色。

說明:

簡寫屬性。定義元素邊框的外觀特性。參閱outline屬性。
  • 如使用borderborder-*短屬性只定義了單個參數值,則其他參數的預設值將無條件覆蓋各自對應的單個屬性值定義。

    舉個例子:

    .demo { border: 1px dashed red; border: solid; } <div class="demo"> <p class="text">獨立屬性被簡寫屬性預設值覆蓋示例</p> </div>

    這個例子中,定了 2 次 border 屬性,第 1 次為 .demo 定義了 1px 的虛線紅色邊框,第 2 次定義了邊框樣式為實線(只定義單個參數值),由於 border 是復合短屬性,第 1 次定義的邊框厚度和邊框顏色都會被 border 的預設值給覆蓋掉,所以最終會顯示為 3px 的實線黑色邊框

  • border的每條邊框都是以切角的方式與相鄰的邊框銜接起來的。

    展示border邊框間的銜接

    如果將裡面的文字移除掉,將會變成這樣,畫面開始變得有趣:

    如果我們改變其中某條邊框的厚度,將會變成這樣:

    如果我們改變其中一些邊框的顏色為透明,將會變成這樣:

    由於邊框銜接是以切角的方式進行的,這將為我們建立出非常多使用border來做各種角的可能性。

  • 對應的腳本特性分別為:border, borderTop, borderRight, borderBottom, borderLeft

兼容性:

  • 淺綠 = 支援
  • 紅色 = 不支援
  • 粉色 = 部分支援
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+

示例: