编程笔记 html5&css&js 041 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 边框属性（将在下一章中详细讲解）都不会有任何作用！
二、练习
<!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;
}
</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>
</div>
</body>
</html>
小结
也可以根据自己的喜好做一个编排。