CSS学习记录04

CSS边框

CSS border 属性指定元素边框的样式、宽度和颜色。
border-style 属性指定要显示的边框类型。
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义3D坡口边框，效果取决于border-color值
ridge - 定义3D脊线边框，效果取决于border-color值
inset - 定义3D inset边框。效果取决于border-color值
outset- 定义3D outset边框。效果取决于border-color 值
none - 定义无边框
hidden - 定义隐藏边框

（注意：除非设置了border-style 属性，否则其他CSS边框属性都不会有任何作用。）

CSS边框宽度

border-width 属性指定四个边框的宽度。

可以将宽度设置为特定大小（有px、pt、cm、em等），也可以使用三个预定义值：thin、medium或thick：

举例：

p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
} 

p.four {
  border-style: dotted;
  border-width: thick;
}

特定边的宽度

border-width属性可以设置一到四个值（顺序为：上边框、右边框、下边框和左边框）：

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 上边框和下边框为 5px，其他边为 20px */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 上边框和下边框为 20px，其他边为 5px */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 上边框 25px，右边框 10px，下边框 4px，左边框 35px */
}

CSS边框颜色

border-color属性用于设置四个边框的颜色。

可以通过以下方式设置颜色：

name - 指定颜色名。例如："red"
HEX - 指定十六进制值。例如： "#ff0000"
RGB - 指定RGB值，例如："rgb(255,0,0)"
HSL - 指定HSL值，例如："hsl(0,100%,50%)"

(注意：如果未设置border-color, 则它将继承元素的颜色。)

p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}

特定边框的颜色

border-color 属性可以设置一到四个值（顺序：上边框、右边框、下边框和左边框）。

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}

CSS边框各边

在CSS中，一些属性可用于指定每个边框（顶部、右侧、底部和左侧）

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

工作原理：

border-style 属性设置四个值：

border-style: dotted solid double dashed;

上边框是虚线
右边框是实线
下边框是双线
左边框是虚线

border-style属性设置三个值：

border-style: dotted solid double;

上边框是虚线
右和左边框是实线
下边框是双线

border-style 属性设置两个值：

border-style: dotted solid;

上和下边框是虚线
右和左边框是实线

border-style 属性设置一个值：

border-style: dotted;

四条边皆为虚线

（border-width 和 border-color 也同样适用上述四种方式）

CSS简写边框属性

可以在一个属性中指定所有单独的边框属性。

border属性是以下各个边框属性的简写属性：

border-width
border-style (必需）
border-color

举例：

p {
  border: 5px solid red;
}

还可以只为一个边指定所有单个边框属性：

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

CSS圆角边框

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}

所有CSS边框属性

属性	描述
border	简写属性，在一条声明中设置所有边框属性。
border-color	简写属性，设置四条边框的颜色。
border-radius	简写属性，可设置圆角的所有四个 border-*-radius 属性。
border-style	简写属性，设置四条边框的样式。
border-width	简写属性，设置四条边框的宽度。
border-bottom	简写属性，在一条声明中设置所有下边框属性。
border-bottom-color	设置下边框的颜色。
border-bottom-style	设置下边框的样式。
border-bottom-width	设置下边框的宽度。
border-left	简写属性，在一条声明中设置所有左边框属性。
border-left-color	设置左边框的颜色。
border-left-style	设置左边框的样式。
border-left-width	设置左边框的宽度。
border-right	简写属性，在一条声明中设置所有右边框属性。
border-right-color	设置右边框的颜色。
border-right-style	设置右边框的样式。
border-right-width	设置右边框的宽度。
border-top	简写属性，在一条声明中设置所有上边框属性。
border-top-color	设置上边框的颜色。
border-top-style	设置上边框的样式。
border-top-width	设置上边框的宽度。