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+

示例: