阅读(2916)

CSS Outline轮廓

最后一次修改 2017年08月04日

CSS Outline轮廓

轮廓是边界的替代。

轮廓线是围绕边框外的元素绘制的线。

+-------------------------------------+
|   Outline                           |  
|   +-----------------------------+   |
|   |Border                       |   |
|   |   +--------------------+    |   |
|   |   |Padding             |    |   |
|   |   |  +--------------+  |    |   |
|   |   |  |Content       |  |    |   |
|   |   |  |              |  |    |   |
|   |   |  +--------------+  |    |   |
|   |   |                    |    |   |
|   |   +--------------------+    |   |
|   |                             |   |
|   +-----------------------------+   |
|                                     |
+-------------------------------------+

我们可以用样式，颜色和宽度来设计轮廓。

outline 属性与 border 属性不同：outline不是元素尺寸的一部分，元素的总宽度和高度不受轮廓宽度的影响。

轮廓不被视为页面的一部分，因此在应用它们时不会导致页面布局被调整。

以下列表描述了与轮廓相关的元素。

outline-color
将颜色设置为轮廓。
Value: color
outline-offset
设置轮廓的偏移量。
Value:length
outline-style
设置轮廓的样式。
此值与border-style属性的值相同。
outline-width
设置轮廓的宽度。
Value:thin or medium or thick or length
outline
简写属性在单个声明中设置轮廓。
Value: color style width

轮廓样式

outline-style 属性指定轮廓的样式。

下表列出了outline-style的可能值。

值	描述
none	没有轮廓。这是默认值
hidden	隐藏轮廓
dotted	点状轮廓
dashed	虚线轮廓
solid	实线轮廓
double	双轮廓
groove	一个3D槽轮廓。效果取决于轮廓颜色值
ridge	3D垄状轮廓。效果取决于轮廓颜色值
inset	3D inset 轮廓。效果取决于轮廓颜色值
outset	3D outset 轮廓。效果取决于轮廓颜色值
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

仅当指定了!DOCTYPE时，IE8才支持轮廓属性。

以下代码显示如何使用轮廓样式。

p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}

轮廓颜色

outline-color 属性设置轮廓的颜色。

p {
    outline-style: dotted;
    outline-color: #00ff00;
}

轮廓宽度

outline-width 设置轮廓的宽度。

值	描述
medium	中等轮廓。这是默认值
thin	细轮廓
thick	粗轮廓
length	允许您定义轮廓的粗细
initial	将此属性设置为其默认值。
inherit	从其父元素继承此属性。

以下代码设置轮廓宽度。

p {
    outline-style: dotted;
    outline-width: 5px;
}

轮廓快捷方式

outline 简写属性在一个声明中设置所有轮廓属性。

简写属性具有以下语法：

outline: outline-color, outline-style, outline-width

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid red;
    outline: green dotted thick;
}
</style>
</head>
<body>
<p>This is a test</p>
</body>
</html>

属性	描述	CSS
outline-color	设置轮廓颜色	3
outline-offset	设置轮廓偏移	3
outline-style	设置轮廓样式	3
outline-width	设置轮廓宽度	3
outline	轮廓的简写属性	3

CSS Outline轮廓

CSS Outline轮廓

轮廓样式

轮廓颜色

轮廓宽度

轮廓快捷方式

相关属性