轮廓与边界非常相似，但也几乎没有主要区别 -
- 轮廓不占用空间。
- 轮廓不必是矩形。
- 所有侧面的轮廓始终相同。不能为元素的不同边的轮廓指定不同的值。
注意 − 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 的所有各种值。 |
