border的属性值borde-style
border属性：
border-style的属性值
描述
最不可预测的边框样式是 double。它定义为两条线的宽度再加上这两条线之间的空间等于 border-width 值。不过，CSS 规范并没有说其中⼀条线是否⽐另⼀条粗或者两条线是否应该是⼀样的粗，也没有指出线之间的空间是否应当⽐线粗。所有这些都有⽤户代理决定，创作⼈员对这个决定没有任何影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-style</title>
<style>
#canvasTEST {
border: 1px dashed #cccccc;
}
div {
div border属性
height: 50px;
border-width: 2px;
border-color: #dadada;
margin-bottom: 20px;
}
div:nth-child(1) {
border-style: dotted;
}
div:nth-child(2) {
border-style: dashed;
}
div:nth-child(3) {
border-style: solid;
}
div:nth-child(4) {
border-width: 10px;
border-style: double;
}
div:nth-child(5) {
border-width: 10px;
border-style: groove;
}
div:nth-child(6) {
border-width: 10px;
border-style: ridge;
}
div:nth-child(7) {
border-width: 10px;
border-style: inset;
}
div:nth-child(8) {
border-width: 10px;
border-style: outset;
}
div:nth-child(9) {
border-width: 10px;
border-style: inherit;
}
　div:nth-child(10) {
height: 70px;
border-width: 10px;
border-style: solid double groove dotted;
　}
</style>
</head>
<body>
<div>(1)dotted：点状边框。在⼤多数浏览器中呈现为实线。</div>
<div>(2)dashed：虚线。在⼤多数浏览器中呈现为实线</div>
<div>(3)solid：实线。</div>
<div>(4)double：双线。双线的宽度等于 border-width 的值。</div>
<div>(5)groove:3D 凹槽边框。其效果取决于 border-color 的值。</div>
<div>(6)ridge:3D 垄状边框。其效果取决于 border-color 的值。</div>
<div>(7)inset:3D inset 边框。其效果取决于 border-color 的值。</div>
<div>(8)outset:3D outset 边框。其效果取决于 border-color 的值。</div>
<div>(9)inherit：从⽗元素继承边框样式。</div>
　<div>border-width: 10px;<br>
border-style: solid double groove dotted;<br>
也可以连写border-style属性值，每条边框设置不同的属性值</div> </body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。