边框区域 Border area
Docs
边框区域
边框区域 border area 由边框边界限制，扩展自内边距区域，是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
边框的粗细由 border-width 和简写的 border 属性控制。如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。假如框盒上设有背景（background-color 或 background-image），背景将会一直延伸至边框的外沿（默认为在边框下层延伸，边框会盖在背景上）。此默认表现可通过 CSS 属性 background-clip 来改变。
border 用于设置盒子的边框：
边框相对于 content/padding/margin 来说特殊一些：
- 边框具备宽度 width;
- 边框具备样式 style;
- 边框具备颜色 color;
设置边框的方式
边框宽度
border-top-width,border-right-width,border-bottom-width,border-left-width- border-width 是上面 4 个属性的简写属性
边框颜色
border-top-color,border-right-color,border-bottom-color,border-left-color- border-color 是上面 4 个属性的简写属性
边框样式
border-top-style,border-right-style,border-bottom-style,border-left-style- border-style 是上面 4 个属性的简写属性
边框的样式设置值：边框的样式有很多，我们可以了解如下的几个：
- groove：凹槽，沟槽，边框看上去好象是雕刻在画布之内
- ridge：山脊，和 grove 相反，边框看上去好象是从画布中凸出来
同时设置的方式
如果我们相对某一边同时设置 宽度 样式 颜色，可以进行如下设置：
- border-top
- border-right
- border-bottom
- border-left
- border：统一设置 4 个方向的边框
边框颜色、宽度、样式的编写顺序任意
<line-width> || <line-style> || <color>
详细介绍
📄️ 元素边框 border
- border | MDN (mozilla.org)
📄️ 元素边框宽度 border-width
- border-width - CSS | MDN (mozilla.org)
📄️ 元素边框样式 border-style
- border-style - CSS | MDN (mozilla.org)
📄️ 元素边框颜色 border-color
- border-color - CSS | MDN (mozilla.org)