1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

outline 用于设置元素的轮廓,是 outline-style (轮廓样式)、 outline-width (轮廓宽度)、 outline-color (轮廓颜色)的缩写。

$$tip

outlineborder 的区别在于, outline 不占据空间,而 border 占据空间。

$$

轮廓样式

outline-style 用以设置轮廓的样式,有以下取值:

取值 效果 描述
none <div style="width: 40px; height: 40px; outline: none 6px teal; background-color: pink;"></div> 默认值,没有边框。
solid <div style="width: 40px; height: 40px; outline: solid 6px teal; background-color: pink;"></div> 实线。
dotted <div style="width: 40px; height: 40px; outline: dotted 6px teal; background-color: pink;"></div> 圆点。
dashed <div style="width: 40px; height: 40px; outline: dashed 6px teal; background-color: pink;"></div> 虚线。
double <div style="width: 40px; height: 40px; outline: double 6px teal; background-color: pink;"></div> 双实线。
groove <div style="width: 40px; height: 40px; outline: groove 6px teal; background-color: pink;"></div> 雕刻效果。
ridge <div style="width: 40px; height: 40px; outline: ridge 6px teal; background-color: pink;"></div> 浮雕效果。
inset <div style="width: 40px; height: 40px; outline: inset 6px teal; background-color: pink;"></div> 陷入效果。
outset <div style="width: 40px; height: 40px; outline: outset 6px teal; background-color: pink;"></div> 突出效果。

轮廓宽度

outline-width 属性可以设置轮廓的宽度,有以下取值:

  • 长度
  • thin:细
  • medium:中等
  • thick:粗

轮廓颜色

outline-color 属性可以设置轮廓的颜色。