CSS轮廓



CSS 轮廓(Outline)

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

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

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

outline

这个元素有一个细黑边框和一个10px宽的绿色双轮廓

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 轮廓属性

属性 描述
outline 在一个声明中设置所有大纲属性
outline-color 设置轮廓的颜色
outline-offset 指定元素的轮廓和边或边框之间的空间
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度