CSS - outline-color-style 属性_CSS 菜鸟教程

描述

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>

<< CSS - outline-offset 属性 CSS - outline-width 属性 >>