20、边框 border

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

<font color = blue>1) border-color 设置四条边框的颜色。</font>

例子 1：<font color = blue>border-color:red green blue pink;</font>
若属性值为4个，那么从左往右按顺时针方向：
上边框是红***r>右边框是绿***r>下边框是蓝***r>左边框是粉色。

例子 2：<font color = blue>border-color:red green blue;</font>
若属性值只有三个值，那么第一个值为上，第二个值代表左右，第三个值代表下。
上边框是红***r>右边框和左边框是绿***r>下边框是蓝色。

例子 3：<font color = blue>border-color:dotted red green;</font>
若属性值只有两个值，那么第一个值代表上下，第二个值代表左右：
上边框和下边框是红***r>右边框和左边框是绿色。

例子 4：<font color = blue>border-color:red;</font>
若属性值只有一个就应用到所有边。
所有 4 个边框都是红色。

可设置边框颜色值为 transparent，创建有宽度的不可见边框。

<font color = blue>2) border-width 设置四条边框的宽度。</font>

<font color = blue>3) border-style 设置四条边框的样式。</font>

  • none 定义无边框。
  • dotted 定义点状边框。在大多数浏览器中呈现为实线。
  • dashed 定义虚线。在大多数浏览器中呈现为实线。
  • solid 定义实线。
  • double 定义双线。双线的宽度等于 border-width 的值。
  • groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
  • ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
  • inset 定义 3D inset 边框。其效果取决于 border-color 的值。
  • outset 定义 3D outset 边框。其效果取决于 border-color 的值。

4) border 在一个声明中设置所有的边框属性。
可以按顺序设置如下属性：

  1. border-width
  2. border-style
  3. border-color
    例：border: 20px solid #066;
    边框宽度20px，边框样式为实线，颜色为蓝绿色。