CSS轮廓属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/web_hxx/article/details/102560166

CSS轮廓

轮廓线是围绕边界（border）外的元素绘制的线，以使元素“脱颖而出”。

CSS具有以下轮廓属性：

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

轮廓样式

outline-style属性指定轮廓的样式，并且可以具有以下值之一：

dotted - 定义虚线轮廓
dashed - 定义虚线轮廓
solid - 定义实线轮廓
double - 定义双重轮廓
groove - 定义3D凹槽轮廓
ridge - 定义3D脊状轮廓
inset - 定义3D插图轮廓
outset - 定义3D开始轮廓
none - 没有定义轮廓
hidden - 定义隐藏的轮廓

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>教程（jc2182.com）</title>
    <style>
        p {outline-color:red;}

        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>

<h2>outline-style属性</h2>

<p class="dotted">虚线轮廓</p>
<p class="dashed">虚线轮廓</p>
<p class="solid">实线轮廓</p>
<p class="double">双重轮廓</p>
<p class="groove">凹槽轮廓。效果取决于轮廓颜色值。</p>
<p class="ridge">山脊轮廓。效果取决于轮廓颜色值。</p>
<p class="inset">内凹轮廓。效果取决于轮廓颜色值。</p>
<p class="outset">外凸轮廓。效果取决于轮廓颜色值。</p>

</body>
</html>

轮廓颜色

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

name - 指定颜色名称，如“red”
RGB - 指定RGB值，例如“rgb（255,0,0）”
十六进制 - 指定十六进制值，如“＃ff0000”
invert - 执行颜色反转（确保轮廓可见，无论颜色背景如何）

以下示例显示了具有不同颜色的一些不同轮廓。另请注意，这些元素在轮廓内部也有一个细黑色边框：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>蝴蝶教程（jc2182.com）</title>
    <style>
        p.ex1 {
            border: 1px solid black;
            outline-style: solid;
            outline-color: red;
        }

        p.ex2 {
            border: 1px solid black;
            outline-style: double;
            outline-color: green;
        }

        p.ex3 {
            border: 1px solid black;
            outline-style: outset;
            outline-color: yellow;
        }
    </style>
</head>
<body>

<h2>边框色属性</h2>

<p class="ex1">红色实线轮廓</p>
<p class="ex2">绿色双线轮廓</p>
<p class="ex3">黄色外突轮廓</p>

</body>
</html>

轮廓宽度

outline-width属性指定轮廓的宽度，并且可以具有以下值之一：

thin （通常为1px）
medium （通常为3px）
thick（通常为5px）
特定尺寸（以px，pt，cm，em等为单位）

以下示例显示了一些具有不同宽度的轮廓：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>教程（jc2182.com）</title>
    <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>

<h2>outline-width 属性</h2>

<p class="ex1">一个 thin 轮廓</p>
<p class="ex2">一个 medium 轮廓</p>
<p class="ex3">一个 thick 轮廓</p>
<p class="ex4">一个 4px 轮廓</p>

</body>
</html>

所有CSS轮廓属性

属性	描述
outline	在一个声明中设置轮廓宽度、轮廓样式和轮廓颜色的简写属性
outline-color	设置轮廓的颜色
outline-offset	指定轮廓与元素的边或边框之间的间距
outline-style	设置轮廓的样式
outline-width	设置轮廓的宽度