学习笔记-CSS border

border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：

    border-width：规定边框的宽度。

    border-style：规定边框的样式。

    border-color：规定边框的颜色。

试一试

---

border-width

border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

可能的值：

    1. thin 定义细的边框。

    2. medium 默认。定义中等的边框。

    3. thick 定义粗的边框。

    4. length 允许您自定义边框的宽度。

    5. inherit 规定应该从父元素继承边框宽度。

试一试

如下设置：上边框是细边框，右边框是中等边框，下边框是粗边框，左边框是 10px 宽的边框：

border-width:thin medium thick 10px;

如下设置：上边框是细边框，右边框和左边框是中等边框，下边框是粗边框：

border-width:thin medium thick;

如下设置：上边框和下边框是细边框，右边框和左边框是中等边框：

border-width:thin medium;

如下设置：所有 4 个边框都是细边框：

border-width:thin;

---

border-style

设置元素所有边框的样式，或者单独地为各边设置边框样式。

只有当这个值不是 none 时边框才可能出现。

试一试

可能的值：

    1. none 定义无边框。

    2. hidden 与 “none” 一样。不过应用于表时除外，对于表，hidden 用于解决边框冲突。

    3. dotted 定义点状边框。在大多数浏览器中呈现为实线。

    4. dashed 定义虚线。在大多数浏览器中呈现为实线。

    5. solid 定义实线。

    6. double 定义双线。双线的宽度等于 border-width 的值。

    7. groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。

    8. ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。

    9. inset 定义 3D inset 边框。其效果取决于 border-color 的值。

    10. outset 定义 3D outset 边框。其效果取决于 border-color 的值。

    11. inherit 规定应该从父元素继承边框样式。

如下设置：上边框是点状，右边框是实线，下边框是双线，左边框是虚线：

border-style:dotted solid double dashed;

如下设置：上边框是点状，右边框和左边框是实线，下边框是双线：

border-style:dotted solid double;

如下设置：上边框和下边框是点状，右边框和左边框是实线：

border-style:dotted solid;

如下设置：所有 4 个边框都是点状：

border-style:dotted;

---

border-color

设置四条边框的颜色。

试一试

可能的值：

    1. color_name 规定颜色值为颜色名称的边框颜色（列如 red）。

    2. hex_number 规定颜色值为十六进制值的边框颜色（列如 #ff0000）。

    3. rgb_number 规定颜色值为 rgb 代码的边框颜色（列如 rgb(255,0,0)）。

    4. transparent 默认值。边框颜色为透明。

    5. inherit 规定应该从父元素继承边框颜色。

如下设置：上边框是红色，右边框是绿色，下边框是蓝色，左边框是粉色：

border-color:red green blue pink;

如下设置：上边框是红色，右边框和左边框是绿色，下边框是蓝色：

border-color:red green blue;

如下设置：上边框和下边框是红色，右边框和左边框是绿色：

border-color:red green;

如下设置：所有 4 个边框都是红色：

border-color:red;