描述
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>
