cssoutline

CSS outline 是一种用于在元素周围创建一个轮廓线的CSS 属性。它类似于边框，但与边框不同的是，轮廓线不占用布局空间（不会增加元素的尺寸），并且它绘制在边框之外，如果边框已经存在。

CSS outline 属性用于为元素添加一个简单的轮廓线，其默认是非零宽度且绘制在边框之外。它可以用于高亮显示元素，使其在布局中更加清晰可见。

outline 属性可以指定以下属性值：

1. Outline-width：定义轮廓线的宽度。可以使用像素、百分比或预定义的值（thin，medium，thick）。

2. Outline-style：定义轮廓线的样式。可以使用预定义的值（none，dotted，dashed，solid，double，groove，ridge，inset，outset）。

3. Outline-color：定义轮廓线的颜色。可以使用颜色名称、十六进制、RGB 或 RGBA 值。

以下是一些示例代码，展示如何使用 outline 属性：

1. 设置红色的轮廓线：

```css

outline: 2px solid red;

```

2. 设置绿色的虚线轮廓线：

```css

outline: 3px dashed green;

```

3. 设置蓝色的双线轮廓线：

```css

outline: 4px double blue;

```

除了上述基本的属性值，outline 还有一些其他的属性，如 outline-offset 和 outline-blur，用于进一步自定义轮廓线的样式。

outline-offset 定义了轮廓线与元素边界之间的距离。它是一个长度值，可以使用负值向内偏移轮廓线，或使用正值向外扩展轮廓线。

```css

outline-offset: 10px;

```

outline-blur 定义了轮廓线的模糊效果。它是一个长度值，可以使用像素或预定义值（none，thin，medium，thick）。

```css

outline-blur: 2px;

```

总结起来，CSS outline 属性是一种简单但有用的方式，用于为元素添加一个轮廓线，以提高其可见性和可读性。它可以帮助在布局中更好地突出显示元素，并可以通过一些附加属性进行进一步的样式化。