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属性。

  • 如使用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的每条边框都是以切角的方式与相邻的边框衔接起来的。

    展示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+

示例：