2021.4.13

今日进度：CSS边框属性

	第一天	第二天	第三天	第四天	第五天
所花时间（小时）	4.5	6
代码量（行）	1000	200
博客量（篇）	1	1
了解到的知识点	python爬取热词分析	CSS边框属性

CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

我的所有边都有边框。

我有一条红色的下边框。

我有圆角边框。

我有一条蓝色的左边框。

CSS 边框样式

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 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

实例

演示不同的边框样式：

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

结果：

点状边框。

虚线边框。

实线边框。

双线边框。

凹槽边框。其效果取决于 border-color 的值。

垄状边框。其效果取决于 border-color 的值。

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

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

无边框。

隐藏边框。

混合边框。

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;
}

结果：

5px border-width

medium border-width

2px border-width

thick border-width

特定边的宽度

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 */
}