border
- 版本：CSS1
- 2018.3.6
简写属性语法：
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+ |
