高级Web前端晋升之View渲染机制，【重识 HTML (6)，作为移动开发程序员应该怎样去规划自己的学习路线

CSS属性 - border-width、border-color、border-style

---

边框宽度：border-*-width

• border-top-width、border-right-width、border-bottom-width、border-left-width

• border-width 是上面 4 个属性的简写属性

边框颜色：border-*-color

• border-top-color、border-right-color、border-bottom-color、border-left-color

• border-color 是上面 4 个属性的简写属性

边框样式：border-*-style

• border-top-style、border-right-style、border-bottom-style、border-left-style

• border-style 是上面 4 个属性的简写属性

• 边框样式的取值：

none：没有边框，边框颜色、边框宽度会被忽略

hidden：与 “none” 类似，多用在表格上，用于解决边框冲突

dotted：边框是一系列的点

dashed：边框是一条虚线

solid：边框是一条实线

double：边框有两条实线。两条线宽和其中的空白的宽度之和等于 border-width 的值

groove：边框看上去好象是雕刻在画布之内

ridge：和 grove 相反，边框看上去好象是从画布中凸出来

inset：该边框使整个框看上去好象是嵌在画布中

outset：和 inset 相反，该边框使整个框看上去好象是从画布中凸出来

示例代码：边框

CSS 属性 - border-top、border-right、border-bottom、border-left、border

---

border-top、border-right、border-bottom、border-left：分别设置 4 个方向的边框

边框颜色、宽度、样式的编写顺序任意