CSS基础：outline轮廓4个属性的详解

最新推荐文章于 2025-03-14 14:59:44 发布

云桃桃前端

最新推荐文章于 2025-03-14 14:59:44 发布

阅读量2.2k

点赞数 23

文章标签： css 前端 html5 css3

本文链接：https://blog.csdn.net/u013179804/article/details/137885439

版权

本文介绍了CSS中的outline属性，如何用于增强元素的焦点可见性、突出显示和调试样式。讲解了outline的基础属性、简写方法以及outline-offset的偏移功能，并提供了代码示例和推荐阅读内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

272篇原创内容-gz.h,更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

CSS 中的 outline 属性用于在元素周围绘制一条轮廓线，位于边框之外，这条线与border属性所定义的边框不同，它不占用盒子模型CSS基础：盒子模型详解，因此不会影响页面的排版，也不会影响元素的可点击区域。

它的作用如下：

提供焦点可见性： 在用户与表单元素交互时，outline 可以使用户清晰地看到当前所处的焦点位置，提高用户体验。比如，我们有时点提交按钮的时候，周边会出现虚线框。
突出显示元素： 可以通过轮廓线来突出显示元素，使其在页面中更加显眼。
用于调试和调整样式： 在开发过程中，可以使用 outline 属性来调试布局或样式问题，以便更好地调整元素的外观和位置。

ok，那我们一起来看一看吧。

outline 基础属性

outline相关的属性主要包括以下 3 个。

1. outline-style - 定义轮廓线的样式。

- 取值类型：none(无), dotted(点状), dashed(虚线), solid(实线), double(双线), groove(凹槽), ridge(脊状), inset(嵌入), outset(外凸)。和 border 一样，不再展开细写了，常用的也就是前 5 个。

2. outline-width - 定义轮廓线的粗细。

- 取值类型：长度值（如px, em等），百分比（相对于包含块的宽度），或者thin, medium, thick等相对值，这个也是和 border-width 一样，不再过多重复说。

3. outline-color - 定义轮廓线的颜色。

- 取值类型：可以看这篇文章html基础：颜色的 5 种表示方法（最全！），比如#ff0000, rgb(255, 0, 0), red等。

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Outline Style Examples</title>
    <style>
      .outline-dotted {
        outline-style: dotted;
        outline-color: #0000ff;
      }

      .outline-dashed {
        outline-style: dashed;
        outline-color: #008000;
      }

      .outline-solid {
        outline-style: solid;
        outline-color: #666;
      }

      .outline-double {
        outline-style: double;
        outline-color: rgb(217, 29, 217);
      }

      .outline-groove {
        outline-style: groove;
        outline-color: orange;
      }

      .example-box {
        width: 100px;
        height: 100px;
        margin: 10px;
        outline-width: 3px;
      }
    </style>
  </head>
  <body>
    <div class="example-box outline-dotted">Dotted Outline</div>
    <div class="example-box outline-dashed">Dashed Outline</div>
    <div class="example-box outline-solid">Solid Outline</div>
    <div class="example-box outline-double">Double Outline</div>
    <div class="example-box outline-groove">Groove Outline</div>
  </body>
</html>

效果如下：

简写方法

为了简写代码，outline 也可以针对以上 3 个属性简写。简写的顺序无关紧要。我比较习惯的是按照 border 的写法：outline-width（宽度）， outline-style（样式），outline-color（颜色）。

注意：在简写中，至少必须包含轮廓样式 outline-style 属性，其他 2 个属性可选。

下面是一个简写的示例：

.example {
  outline: #0ff solid 5px; /* 将轮廓设置为青色的实线，宽度为5像素 */
}

outline 偏移

outline 是在盒子模型的 border 之外绘制的一条线，而outline-offset 允许你控制这条线与 border 之间的距离。比如，下列代码，我们同时设置了 padding，margin，border。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Outline Style Examples</title>
    <style>
      .outline {
        width: 100px;
        height: 100px;
        border: 10px solid #ef7e84; /* 西瓜红色的边框 */
        padding: 10px;
        margin: 100px;
        outline: 5px #00f dotted; /* 蓝色的轮廓 */
      }
    </style>
  </head>
  <body>
    <div class="outline">Dotted Outline</div>
  </body>
</html>

效果如图，可以很明显看出 outline 是紧贴着 border 的，也意味着默认偏移值是 0。

以下是 outline-offset 的特性：

outline-offset依赖于outline的设置，如果没有设置outline属性（即没有为元素添加轮廓线），那么outline-offset属性将不会有任何效果。
它可以是正数或负数，使用长度单位（如 px, em）进行设置。
正值会将轮廓线向外推，负值则会使其向内收缩，但轮廓线不会超过元素的边框。
轮廓线可以位于 margin 之内，也可以部分或完全位于 border 之外。

好，我们现在根据刚才的案例，增加一个负值的偏移：

    <style>
      .outline {
        width: 100px;
        height: 100px;
        border: 10px solid #ef7e84; /* 西瓜红色的边框 */
        padding: 10px;
        margin: 100px;
        outline: 5px #00f dotted; /* 蓝色的轮廓 */
        outline-offset: -10px; /* 轮廓向内偏移-10px */
      }
    </style>

效果如图。