CSS学习笔记（四）CSS 轮廓

最新推荐文章于 2024-08-22 22:46:25 发布

〔晴【天】º〕

最新推荐文章于 2024-08-22 22:46:25 发布

阅读量287

点赞数

分类专栏：前端学习文章标签： css html

本文链接：https://blog.csdn.net/qq_43625134/article/details/116851433

版权

前端学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

CSS 轮廓

轮廓是在元素周围绘制的一条线，在边框之外，以凸显元素。

CSS 拥有如下轮廓属性：

outline-style
outline-color
outline-width
outline-offset
outline

注意：轮廓与边框不同！不同之处在于：轮廓是在元素边框之外绘制的，并且可能与其他内容重叠。同样，轮廓也不是元素尺寸的一部分；元素的总宽度和高度不受轮廓线宽度的影响。

CSS 轮廓样式

outline-style 属性指定轮廓的样式，并可设置如下值：

dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double -定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。

下例展示了不同的 outline-style 值：

实例
演示不同的轮廓样式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>outline</title>
    <style>
        p {
            outline-color: red;
            width: 400px;
        }

        p.dotted {
            outline-style: dotted;
        }

        p.dashed {
            outline-style: dashed;
        }

        p.solid {
            outline-style: solid;
        }

        p.double {
            outline-style: double;
        }

        p.groove {
            outline-style: groove;
        }

        p.ridge {
            outline-style: ridge;
        }

        p.inset {
            outline-style: inset;
        }

        p.outset {
            outline-style: outset;
        }
    </style>
</head>

<body>
    <h1>outline-style 属性</h1>

    <p class="dotted">点状轮廓</p>
    <p class="dashed">虚线轮廓</p>
    <p class="solid">实线轮廓</p>
    <p class="double">双线轮廓</p>
    <p class="groove">凹槽轮廓。效果取决于 outline-color 值。</p>
    <p class="ridge">凸脊轮廓。效果取决于 outline-color 值。</p>
    <p class="inset">凹边轮廓。效果取决于 outline-color 值。</p>
    <p class="outset">凸边轮廓。效果取决于 outline-color 值。</p>
</body>

</html>

结果：
在这里插入图片描述
注意：除非设置了 outline-style 属性，否则其他轮廓属性（在下一章中将详细介绍）都不会有任何作用！

CSS 轮廓宽度

outline-width 属性指定轮廓的宽度，并可设置如下值之一：

thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）

下例展示了一些不同宽度的轮廓：

<!DOCTYPE html>
<html>

<head>
    <style>
        p.ex1 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: thin;
        }

        p.ex2 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: medium;
        }

        p.ex3 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: thick;
        }

        p.ex4 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
            outline-width: 4px;
        }
    </style>
</head>

<body>
    <h1>outline-width 属性</h1>

    <p class="ex1">细的轮廓。</p>
    <p class="ex2">中等的轮廓。</p>
    <p class="ex3">粗的轮廓。</p>
    <p class="ex4">4 像素的粗轮廓。</p>

</body>

</html>

结果：
在这里插入图片描述

CSS 轮廓颜色

outline-color 属性用于设置轮廓的颜色。
可以通过以下方式设置颜色：

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如"rgb(255,0,0)"
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
invert -执行颜色反转（确保轮廓可见，无论是什么颜色背景）

CSS Outline - 简写属性

outline 属性是用于设置以下各个轮廓属性的简写属性：

outline-width
outline-style（必需）
outline-color

从上面的列表中，outline 属性可指定一个、两个或三个值。值的顺序无关紧要。

CSS 轮廓偏移

outline-offset 属性在元素的轮廓与边框之间添加空间。元素及其轮廓之间的空间是透明的。
实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            margin: 30px;
            background: yellow;
            border: 1px solid black;
            outline: 1px solid red;
            outline-offset: 25px;
        }
    </style>
</head>

<body>
    <p>边框外还有25px的轮廓</p>
</body>

</html>