CSS轮廓

CSS 轮廓（Outline）

CSS outline 属性指定轮廓的样式、颜色和宽度。

轮廓是围绕元素绘制的线 (外边界)，使元素“脱颖而出”。

但是，轮廓属性与边框属性不同，轮廓不是元素维度的一部分，元素的总宽度和高度不受轮廓宽度的影响。

Outline 样式（Style）

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

outline-style 属性可以具有下列值之一：

• dotted - 定义一个点轮廓
• dashed - 定义一个虚线轮廓
• solid - 定义一个实线轮廓
• double - 定义一个双边轮廓
• groove - 定义了一个三维槽轮廓. 效果取决于轮廓颜色值。
• ridge - 定义一个三维脊轮廓. 效果取决于轮廓颜色值。
• inset - 定义一个三维内嵌轮廓. 效果取决于轮廓颜色值。
• outset - 定义一个三维外突轮廓. T效果取决于轮廓颜色值。
• 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;}

让我试试

注意：其他的CSS轮廓属性没有有何影响，除非轮廓样式属性设置！

Outline 颜色（Color）

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

颜色可以设置如下:

• 颜色名称 - 例如： "red"
• RGB - 例如： "rgb(255,0,0)"
• 16机制 - 例如： "#ff0000"
• invert - 实现颜色倒置（可以确保轮廓是可见的，而不考虑颜色背景）

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

让我试试

Outline 宽度（Width）

outline-width 属性指定轮廓的宽度。

宽度可以设置为一个特定的大小 (使用 px, pt, cm, em等) 或使用三个预定义值中的一个: thin, medium, 或者 thick.

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;
}

让我试试

Outline - 缩写性质

若要缩短代码，也可以在一个属性中指定所有单独的轮廓属性。

outline 属性是下列单个大纲属性的简写属性：

• outline-width
• outline-style (必须)
• outline-color

p {
    border: 1px solid black;
    outline: 5px dotted red;
}

让我试试

所有 CSS 轮廓属性