CSS - 轮廓

上一页
下一页

轮廓与边界非常相似，但也几乎没有主要区别 -

  • 轮廓不占用空间。
  • 轮廓不必是矩形。
  • 所有侧面的轮廓始终相同。不能为元素的不同边的轮廓指定不同的值。
注意 − IE 6 或 Netscape 7 不支持轮廓属性。

您可以使用 CSS 设置以下轮廓属性。

  • outline-width 属性用于设置轮廓的宽度。
  • outline-style 属性用于设置轮廓的线条样式。
  • outline-color 属性用于设置轮廓的颜色。
  • outline-offset 属性用于设置 ab 元素的轮廓和边框边缘之间的间距。
  • outline 属性用于在单个语句中设置上述所有三个属性。

outline-width 属性

outline-width 属性指定要添加到框中的轮廓的宽度。其值应为 length 或 thin、medium 或 thick 值之一，就像 border-width 属性一样。

零像素的宽度意味着没有轮廓。

这是一个例子 -


<html>
	 	<head>
	 	</head>
	 	<body>
	 	 	 <p style = "outline-width: thin; outline-style: solid; padding: 5px">
	 	 	 	 	This text is having thin outline.
	 	 	 </p>
	 	 	 <p style = "outline-width: thick; outline-style: solid; padding: 5px">
	 	 	 	 	This text is having thick outline.
	 	 	 </p>
	 	 	 <p style = "outline-width: 5px; outline-style: solid; padding: 5px">
	 	 	 	 	This text is having 5px outline.
	 	 	 </p>
	 	</body>
</html>

outline-style 属性

outline-style 属性指定围绕元素的线条（实线、虚线或虚线）的样式。它可以采用以下值之一 -

  • none - 无轮廓。（相当于 outline-width：0;
  • solid − 轮廓是一条实线。
  • dotted - 轮廓是一系列点。
  • dashed - 轮廓是一系列短线。
  • double − 轮廓是两条实线。
  • groove - 轮廓看起来就像是雕刻在页面上的一样。
  • ridge - 轮廓看起来与凹槽相反。
  • inset - 轮廓使框看起来像嵌入在页面中。
  • outset − 轮廓使框看起来像是从画布中出来的。
  • hidden - 与无相同。

这是一个例子 -


<html>
	 	<head>
	 	</head>
	 	<body>
	 	 	 <p style = "outline-width: thin; outline-style: solid; padding: 5px">
	 	 	 	 	This text is having thin solid outline.
	 	 	 </p>	
	 	 	 <p style = "outline-width: thick; outline-style: dashed; padding: 5px">
	 	 	 	 	This text is having thick dashed outline.
	 	 	 </p>
	 	 	 <p style = "outline-width: 5px; outline-style: dotted; padding: 5px">
	 	 	 	 	This text is having 5px dotted outline.
	 	 	 </p>
	 	</body>
</html>

outline-color 属性

outline-color 属性允许您指定轮廓的颜色。其值应为颜色名称、十六进制颜色或 RGB 值，与 color 和 border-color 属性一样。

这是一个例子 -


<html>
	 	<head>
	 	</head>
	 	<body>
	 	 	 <p style = "outline-width: thin; outline-style: solid; outline-color: red; padding: 5px">
	 	 	 	 	This text is having thin solid red outline.
	 	 	 </p>
	 	 	 <p style = "outline-width: thick; outline-style: dashed; outline-color: #009900; padding: 5px">
	 	 	 	 	This text is having thick dashed green outline.
	 	 	 </p> 	 		
	 	 	 <p style = "outline-width: 5px; outline-style: dotted; outline-color: rgb(13,33,232); padding: 5px">
	 	 	 	 	This text is having 5px dotted blue outline.
	 	 	 </p>
	 	</body>
</html>

outline-offset 属性

outline-offset 属性用于指定轮廓与元素的边框边缘之间的空间。轮廓和元素之间的空间是透明的。

这是一个例子 -


<html>
	 	<head>
	 	 	 	 <style>
	 	 	 	 	 div.example {
	 	 	 	 	 	 margin: 20px;
	 	 	 	 	 	 border: 2px dotted #000;
	 	 	 	 	 	 background-color: #08ff90;
	 	 	 	 	 	 outline: 4px solid #666;
	 	 	 	 	 	 outline-offset: 10px;
	 	 	 	 	 }
	 	 	 	 </style>
	 	</head>
	 	<body>
	 	 	 	 <h2>Outline-offset property</h2>
	 	 	 	 <div class="example">The outline-offset is 10px</div>
	 	</body>
</html>

outline 属性

outline 属性是一个速记属性，允许您在单个语句中指定不同属性的值。

  • 可以传递的值为 outline-style、outline-color 和 outline-width。
  • 值的传递顺序不是固定的。
  • outline-offset 不能作为 outline 中的速记属性传递。它需要单独传递。

这是一个例子 -


<html>
	 	<head>
	 	</head>
	 	<body>
	 	 	 <p style = "outline: thin solid red; padding: 10px;">
	 	 	 	 	This text is having thin solid red outline.
	 	 	 </p>
	 	 	 <p style = "outline: thick dashed #009900; padding: 10px;">
	 	 	 	 	This text is having thick dashed green outline.
	 	 	 </p>
	 	 	 <p style = "outline: 5px dotted rgb(13,33,232); padding: 10px;">
	 	 	 	 	This text is having 5px dotted blue outline.
	 	 	 </p>
	 	</body>
</html>

轮廓与边框

下表说明了轮廓和边框之间的差异：

轮廓 边框
轮廓是围绕元素的非矩形形状，通常使用纯色。 边框是围绕元素的内容绘制的矩形形状，可以是实线、虚线或虚线，并且可以具有不同的颜色和大小。
它不会占用布局中的任何空间，也不会影响元素的大小或位置。 它会影响元素的大小和位置，因为它会增加元素的宽度。
它通常用于突出显示或强调元素，例如当元素被聚焦或激活时。 它可以用于各种目的，例如分离元素、创建框和添加视觉重点。
可以使用 CSS 中的 outline 属性来创建它。 可以使用 CSS 中的 border 属性来创建它。

下面是一个示例：


<html>
<head>
	 	<style>
	 	 	 p {
	 	 	 	 	outline: thick solid red;
	 	 	 	 	outline-offset: 5px;	
	 	 	 	 	padding: 10px;	
	 	 	 	 	border: #009900 inset 10px;
	 	 	 }
	 	</style>
</head>
<body>
	 	<p>See the difference of outline and border around the p element. The outline is red in color and the border is green.</p>
</body>
</html>

轮廓的一些示例如下：

属性 描述
outline 此示例显示作为简写传递给 outline 的所有各种值。
outline-color 此示例显示了传递给 outline-color 的所有各种值。
outline-style 此示例显示传递给 outline-style 的所有各种值。
outline-width 此示例显示传递给 outline-width 的所有各种值。
outline-offset 此示例显示了传递 outline-offset 的所有各种值。
打印本页
上一页
下一页