CSS Outline 轮廓

前言

• 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

  

• 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

属性	描述	CSS	备注	🔗
outline	在一个声明中设置所有的轮廓属性	2		🔗
outline-style	设置轮廓的样式	2		🔗
outline-width	设置轮廓的宽度	2		🔗
outline-color	设置轮廓的颜色	2		🔗

• outline 是围绕元素。它是围绕元素的边距。但是，它是来自不同的边框属性。

• outline 不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

1、简写属性

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

属性	描述	CSS	备注	🔗
outline	在一个声明中设置所有的轮廓属性	2		🔗

• 属性值

值	描述
outline-color	规定边框的颜色
outline-style	规定边框的样式
outline-width	规定边框的宽度
inherit	规定应该从父元素继承 outline 属性的设置

• 可以设置的属性分别（按顺序）：

  • outline-color
  • outline-style
  • outline-width

• 如果不设置其中的某个值，也不会出问题，比如 outline: solid #ff0000; 也是允许的。

• 实例

  <style>
      p {
          border: 1px solid red;
          outline: green dashed 5px;
      }
  </style>

  <p>段落中的一些文本。</p>

• 效果

  段落中的一些文本。

2、样式

• outline-style 属性指定 outline 的样式。

属性	描述	CSS	备注	🔗
outline-style	设置轮廓的样式	2		🔗

• 属性值

值	描述
none	默认。定义无轮廓
dotted	定义点状的轮廓
dashed	定义虚线轮廓
solid	定义实线轮廓
double	定义双线轮廓。双线的宽度等同于 outline-width 的值
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值
inherit	规定应该从父元素继承轮廓样式的设置

• 实例

  <style>
      p {
          border: 1px solid red;
          outline-style: dashed;
      }
  </style>

  <p>段落中的一些文本。</p>

• 效果

  段落中的一些文本。

3、宽度

• outline-width 指定轮廓的宽度。

属性	描述	CSS	备注	🔗
outline-width	设置轮廓的宽度	2		🔗

• 属性值

值	描述
thin	规定细轮廓
medium	默认。规定中等的轮廓
thick	规定粗的轮廓
length	允许您规定轮廓粗细的值
inherit	规定应该从父元素继承轮廓宽度的设置

• 请始终在 outline-width 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的宽度。

• 实例

  <style>
      p.one {
          border: 1px solid red;
          outline-style: solid;
          outline-width: thick;
      }
      p.two {
          border: 1px solid red;
          outline-style: dotted;
          outline-width: 3px;
      }
  </style>

  <p class="one">This is some text in a paragraph.</p>
  <p class="two">This is some text in a paragraph.</p>

• 效果

  This is some text in a paragraph.

  
  

  This is some text in a paragraph.

4、颜色

• outline-color 属性指定轮廓颜色。

属性	描述	CSS	备注	🔗
outline-color	设置轮廓的颜色	2		🔗

• 属性值

值	描述
color	指定轮廓颜色。在 CSS 颜色值寻找颜色值的完整列表
invert	默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见
inherit	规定应该从父元素继承轮廓颜色的设置

• 请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

• 实例

  <style>
      p {
          border: 1px solid red;
          outline-style: dotted;
          outline-color: #00ff00;
      }
  </style>

  <p class="one">This is some text in a paragraph.</p>

• 效果

  This is some text in a paragraph.

5、CSS 实例

• 围绕一个元素（outline），绘制一条线


• 设置轮廓的样式


• 设置轮廓颜色


• 设置轮廓的宽度