outline-style属性设置元素的轮廓
轮廓的样式
- dotted - 定义点状的轮廓。
- dashed - 定义虚线的轮廓。
- solid - 定义实线的轮廓。
- double - 定义双线的轮廓。
- groove - 定义 3D 凹槽轮廓。
- ridge - 定义 3D 凸槽轮廓。
- inset - 定义 3D 凹边轮廓。
- outset - 定义 3D 凸边轮廓。
- none - 定义无轮廓。
- hidden - 定义隐藏的轮廓。
实例代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
*{
margin-left:5px;
}
p{
outline-color:red;
width:300px;
}
.dotted{
outline-style:dotted;
}
.dashed{
outline-style:dashed;
}
.solid{
outline-style:solid;
}
.double{
outline-style:double;
}
.groove{
outline-style:groove;
}
.ridge{
outline-style:ridge;
}
.inset{
outline-style:inset;
}
.outset{
outline-style:outset;
}
</style>
</head>
<body>
<h1>outline-style属性</h1>
<p class="dotted">点状轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双线轮廓</p>
<p class="groove">凹槽轮廓。效果取决于outline-color值</p>
<p class="ridge">凸脊轮廓。效果取决于outline-color值</p>
<p class="inset">凹边轮廓。效果取决于outline-color值</p>
<p class="outset">凸边轮廓。效果取决于outline-color值</p>
</body>
</html>
运行效果：
评论