CSS 轮廓「outline」属性-猿码集

CSS 轮廓「outline」属性

1. 概述

在CSS中，轮廓是一个可见的类似于边框的框，可添加到一个元素的外部。它与边框不同，因为它不占用布局空间，也不一定是矩形。CSS `outline`属性用于设置元素的轮廓。

`outline`属性可以设置`outline-color`，`outline-style`和`outline-width`三个属性。

1.1 `outline-color`

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


outline-color: red;

使用预定义的颜色值：


outline-color: gray;

也可以使用十六进制、RGB、RGBA或HSL等颜色表示法。

1.2 `outline-style`

`outline-style`用于设置轮廓的样式。


outline-style: dotted;

轮廓样式可以是：`dotted`（点）、`dashed`（虚线）、`solid`（实线）、`double`（双线）、`groove`（凹）、`ridge`（凸）、`inset`（内阴影）、`outset`（外阴影）、`none`（无）或inherit。


outline-style: dotted;


outline-style: dashed;


outline-style: solid;


outline-style: double;


outline-style: groove;


outline-style: ridge;


outline-style: inset;


outline-style: outset;


outline-style: none;

1.3 `outline-width`

`outline-width`用于设置轮廓的宽度。


outline-width: 2px;

轮廓宽度可以是以像素、em、rem等为单位的长度值。


outline-width: thin;


outline-width: medium;


outline-width: thick;

2. 轮廓的应用

2.1 焦点指示器

轮廓常用于指示当前元素是否被选中，并在用户与网页交互时给出视觉反馈。它通常用于链接和表单元素，例如按钮、输入框、选择框和复选框等。


a:focus {
  outline: 2px dotted blue;
}


input:focus,
button:focus,
select:focus {
  outline: 2px dotted blue;
}

2.2 轮廓偏移

`outline-offset`属性可以用于设置轮廓与元素边缘之间的距离。使用`outline-offset`可以避免轮廓覆盖其他内容，另外，使用负值可以使轮廓在元素边缘内部。


outline-offset: 10px;


outline: 2px dashed red;
outline-offset: -10px;

3. 总结

轮廓是一个有用的工具，使得我们可以为用户提供比简单的边框更多的可访问性，这对于设计易于使用的网页和应用程序至关重要。`outline`属性可以用于设置轮廓的颜色、样式和宽度，`outline-offset`属性可以用于调整轮廓与元素的距离。

CSS 轮廓「outline」属性