阅读(2723)

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槽轮廓。 效果取决于轮廓颜色值
ridge3D垄状轮廓。 效果取决于轮廓颜色值
inset3D inset 轮廓。 效果取决于轮廓颜色值
outset3D 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