CSS 轮廓（outline）属性

在CSS中，outline 属性用于在元素周围创建一种轮廓效果，与边框不同，轮廓不占据空间，不影响布局。outline 通常用于在元素获得焦点时或者通过JavaScript脚本设置的交互效果。

以下是 outline 属性的一些常见用法：

1. 设置轮廓样式 (outline-style):

div {
  outline-style: dashed; /* 设置轮廓样式，可选值：dashed, dotted, solid, double, groove, ridge, inset, outset, none */
}

2. 设置轮廓宽度 (outline-width):

div {
  outline-width: 2px; /* 设置轮廓宽度，可以使用像素、em、rem等单位 */
}

3. 设置轮廓颜色 (outline-color):

div {
  outline-color: #333; /* 设置轮廓颜色，使用十六进制颜色代码 */
}

4. 分别设置轮廓的属性:

div {
  outline-style: dashed;
  outline-width: 2px;
  outline-color: #333;
}

5. 简写形式 (outline):

div {
  outline: 2px dashed #333; /* 使用简写形式设置轮廓样式、宽度和颜色 */
}

6. 轮廓偏移 (outline-offset):

div {
  outline-offset: 5px; /* 设置轮廓偏移，控制轮廓与元素边缘的距离 */
}

示例：

div {
  outline: 2px dashed #333;
  outline-offset: 5px;
}

这将创建一个带有虚线轮廓、宽度为2像素、颜色为 #333 的元素，并且轮廓与元素的边缘有5像素的偏移。

outline 属性通常用于强调元素的可交互性，例如在元素获得焦点时，或者通过JavaScript脚本添加一些动态效果时。

转载请注明出处：http://www.pingtaimeng.com/article/detail/12529/CSS