border

border 短属性语法：

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

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

媒　体：视觉

border-* 分拆独立属性语法：

border-top, border-right, border-bottom, border-left：<line-width> || <line-style> || <color>

默认值：看每个独立属性

适用于：所有元素

继承性：无

动画性：看每个独立属性

计算值：看每个独立属性

媒　体：视觉

下属独立属性：border-*-width || border-*-style || border-*-color

取值：

<line-width>：
定义元素的边框厚度。
<line-style>：
定义元素的边框样式。
<color>：
定义元素的边框颜色。

说明：

复合短属性。定义元素边框的外观特性。参阅outline属性。

  • 如使用border或border-*短属性只定义了单个参数值，则其他参数的默认值将无条件覆盖各自对应的单个属性值定义。

    举个例子：

    .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, 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+

示例：