编程笔记 html5&css&js 041 CSS边框属性
- [一、CSS 边框类型](#一、CSS 边框类型)
- [二、CSS 边框宽度](#二、CSS 边框宽度)
- [三、CSS 边框颜色](#三、CSS 边框颜色)
- [四、CSS Border - 简写属性](#四、CSS Border - 简写属性)
- [五、CSS 圆角边框](#五、CSS 圆角边框)
- [六、所有 CSS 边框属性](#六、所有 CSS 边框属性)
- 七、练习
- 小结
盒子是由四周的边框组成，边框的属性就构成了盒子的大部分样式。
一、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 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。
注意：除非设置了 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; /* 上红、右绿、下蓝、左黄 */
}
HEX 值
边框的颜色也可以使用十六进制值（HEX）来指定：
p.one {
border-style: solid;
border-color: #ff0000; /* 红色 */
}
一试
RGB 值
或者使用 RGB 值：
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* 红色 */
}
HSL 值
也可以使用 HSL 值：
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* 红色 */
}
四、CSS Border - 简写属性
处理边框时要考虑许多属性。为了缩减代码，也可以在一个属性中指定所有单独的边框属性。border 属性是以下各个边框属性的简写属性：
border-width
border-style（必需）
border-color
p {
border: 5px solid red;
}
您还可以只为一个边指定所有单个边框属性：
左边框
p {
border-left: 6px solid red;
background-color: lightgrey;
}
下边框
p {
border-bottom: 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 设置上边框的宽度。
七、练习
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>编程笔记 html5&css&js CSS边框属性</title>
<meta charset="utf-8" />
<style>
body {
margin: 0 auto;
padding: 0;
height: 100%;
display: block;
justify-content: center;
align-items: center;
color: greenyellow;
background: #000;
}
.box1 {
width: 800px;
height: 800px;
background-color: black;
border-color: white;
border-width: 2px;
border-style: solid;
padding: 0px;
margin: 50px auto;
}
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;
}
p.radius {
border: 2px solid red;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="box1">
<h1>border-style 属性</h1>
<p>此属性规定要显示的边框类型：</p>
<p class="dotted">dotted 点状边框。</p>
<p class="dashed">dashed 虚线边框。</p>
<p class="solid">solid 实线边框。</p>
<p class="double">double 双线边框。</p>
<p class="groove">groove 凹槽边框。</p>
<p class="ridge">ridge 垄状边框。</p>
<p class="inset">inset 3D inset 边框。</p>
<p class="outset">outset 3D outset 边框。</p>
<p class="none">none 无边框。</p>
<p class="hidden">hidden 隐藏边框。</p>
<p class="mix">mix 混合边框。</p>
<p class="radius">
border-radius
<br />
圆角边框。
</p>
</div>
</body>
</html>
小结
也可以根据自己的喜好做一个编排。