CSS轮廓属性
大纲是围绕一个元素绘制的线 - 境外。 这可以被用来制造元素"stand out" 。
CSS的outline属性指定的样式，颜色和轮廓的宽度。
这个元素有一个薄薄的黑色边框和轮廓两倍即10px的宽和绿色。
CSS Outline
一个outline是元素周围绘制（境外）的线，使元素"stand out" 。
然而， outline酒店距离border属性不同- outline是不是一个元素的尺寸的一部分; 元素的总宽度和高度不受轮廓的宽度。
Outline风格
在outline-style属性指定轮廓的风格。
在outline-style属性可以是下列值之一：
-
dotted-定义虚线轮廓 -
dashed-定义虚线轮廓 -
solid-定义了坚实的轮廓 -
double-定义了一个双轮廓 -
groove-定义3D凹槽的轮廓。 其效果取决于轮廓色值 -
ridge-定义了一个三维脊轮廓。 其效果取决于轮廓色值 -
inset-定义3D插图轮廓。 其效果取决于轮廓色值 -
outset- 3D突出轮廓。 其效果取决于轮廓色值 -
none-不定义任何轮廓 -
hidden-定义了一个隐藏的轮廓
下面的示例首先设置围绕每个细的黑色边框<p>元素，那么它显示了不同的outline-style值：
例
p {
border: 1px solid black;
outline-color: red;
}
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;}结果：
A dotted outline.
A dashed outline.
A solid outline.
A double outline.
A groove outline. The effect depends on the outline-color value.
A ridge outline. The effect depends on the outline-color value.
An inset outline. The effect depends on the outline-color value.
An outset outline. The effect depends on the outline-color value.
试一试»  | 注意：除非下面介绍的其他CSS轮廓属性都不会产生任何影响outline-style属性设置！ |
|---|
轮廓颜色
的outline-color属性用于设置轮廓的颜色。
颜色可以通过设置为：
- 名称-指定颜色的名称，如"red"
- RGB -指定RGB值，如"rgb(255,0,0)"
- 十六进制-指定一个十六进制值，如"#ff0000"
- 转化 - 执行彩色反转（这确保了轮廓是可见的，而不管颜色背景）
例
p
{
border: 1px solid black;
outline-style: double;
outline-color: red;
}结果：
A colored outline.
外形宽度
该outline-width属性指定轮廓的宽度。
的宽度可以设置为一个特定大小（以px, pt, cm, em等）或通过使用三个预定义值之一：薄，中等或厚。
例
p {border: 1px solid black;}
p.one
{
outline-style: double;
outline-color: red;
outline-width: thick;
}
p.two
{
outline-style: double;
outline-color: green;
outline-width: 3px;
}
结果：
A thick outline.
A thinner outline.
Outline -速记属性
为了缩短代码，但也可以在一个属性来指定所有的单个轮廓特性。
该outline属性是以下各个轮廓属性的缩写属性：
-
outline-width -
outline-style（必填） -
outline-color
自测练习用！
所有的CSS属性大纲
| 属性 | 描述 |
|---|---|
| outline | 设置在一个声明中所有的轮廓属性 |
| outline-color | 设置轮廓的颜色 |
| outline-offset | 指定的元素的轮廓和边缘或边界之间的空间 |
| outline-style | 设置轮廓的风格 |
| outline-width | 设置轮廓的宽度 |