描述
outline-color属性决定元素周围轮廓的样式。
属性值
none: 不绘制轮廓。
dotted: 轮廓绘制为一系列点。
dashed - 轮廓绘制为一系列短线段，虚线。
solid: 轮廓绘制为单条不间断的线，实线。
double: 轮廓被绘制为一对不间断的线。
groove: 轮廓被绘制为一条犁沟雕刻到文档的表面。
ridge - 绘制轮廓，就好像它是向上推文档表面的脊。
inset: 绘制轮廓，就好像整个元素将文档的表面推离用户。
outset: 绘制轮廓为尽管整个元素将文档的表面推向用户。
initial: 轮廓绘制为其默认值。
inherit: 通过继承其父元素来绘制轮廓。
适用范围
所有 HTML 元素。
DOM 语法
object.style.outlineStyle = "solid"; 示例
这里是示例 -
<html>
<head>
<style>
p {border: 1px solid blue;}
</style>
</head>
<body>
<p style = "outline-width: 5px; outline-style: solid;">
This text is having thin solid outline.
</p>
<p style = "outline-width: 5px; outline-style: dashed;">
This text is having thick dashed outline.
</p>
<p style = "outline-width: 5px; outline-style: dotted;">
This text is having 5px dotted outline.
</p>
<p style = "outline-width: 5px; outline-style: double;">
This text is having 5px double outline.
</p>
<p style = "outline-width: 5px; outline-style: groove; ">
This text is having 5px groove outline.
</p>
<p style = "outline-width: 5px; outline-style: ridge;">
This text is having 5px double outline.
</p>
<p style = "outline-width: 5px; outline-style: inset;">
This text is having 5px inset outline.
</p>
<p style = "outline-width: 5px; outline-style: outset;">
This text is having 5px outset outline.
</p>
</body>
</html>