CSS 基础（005_轮廓）

最新推荐文章于 2024-07-16 17:16:30 发布

柯南道尔2606

最新推荐文章于 2024-07-16 17:16:30 发布

阅读量440

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css_outline.asp

翻译：

CSS Outline

CSS 的 outline 属性用以指定轮廓的样式、颜色和宽。
轮廓是围绕元素（边框之外）的线条，用以“凸显”元素。
然而，outline 属性和 border 属性是不同的，outline 不是元素范围的部分；元素的总宽和高不会受到轮廓的宽度影响。

CSS Outline

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>CSS Outline Properties</title>
        <meta charset="utf-8">
        <style>
            .w3-theme {
                color: #fff !important;
                background-color: #73AD21 !important;
                background-color: #4CAF50 !important
            }
        </style>
        <style>
            .w3-boxmodel .outline {
                background: #f1f1f1;
                padding: 45px;
                position: relative;
                border: 2px dashed #f1f1f1;
            }

            .w3-boxmodel .outline:before {
                content: "Outline（轮廓）";
                font-size: 1.4em;
                position: absolute;
                left: 0;
                top: 1.8%;
                width: 100%;
                text-align: center;
            }

            .w3-boxmodel .border {
                color: black;
                padding: 45px;
                position: relative;
                background: #f1f1f1;
                border: 1px solid #555;
            }

            .w3-boxmodel .border:before {
                content: "Border（边框）";
                font-size: 1.4em;
                position: absolute;
                left: 0%;
                top: 3.7%;
                width: 100%;
                text-align: center;
            }

            .w3-boxmodel .content {
                padding: 20px;
                position: relative;
                background: white;
                border: 1px solid #555;
            }

            .w3-boxmodel .content:before {
                content: "Content（内容，即元素）";
                font-size: 1.4em;
                display: block;
                text-align: center;
                line-height: 3.5;
            }
        </style>
    </head>
    <body>
        <div class="w3-boxmodel">
            <div class="outline w3-theme">
                <div class="border">
                    <div class="content"></div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS Outline

<!DOCTYPE html>
<html lang="en-US">
    <head>
    <title>CSS Outline Properties</title>
    <meta charset="utf-8">
    <style>
        div {
            border: 2px solid black;
        }

        p {
            border: 2px solid black;
            outline: #4CAF50 double 10px;
            padding: 15px;
            margin: 60px;
            text-align: center;
        }
    </style>
    </head>
    <body>
        <div>
            <p>This element has a thin black border and a double outline that is 10px wide and green.</p>
        </div>
    </body>
</html>

Outline Style

outline-style 属性用以指定轮廓的样式。
outline-style 属性有以下几种取值：

dotted - 定义点边框。
dashed - 定义虚线边框。
solid - 定义实线边框。
double - 定义双边框。
groove - 定义 3D 凹槽边框，效果取决于 border-color 的值。
ridge - 定义 3D 垄状边框，效果取决于 border-color 的值。
inset - 定义 3D inset 边框，效果取决于 border-color 的值。
outset - 定义 3D outset 边框，效果取决于 border-color 的值。
none - 定义无边框。
hidden - 定义隐藏边框。（与 none 相同。不过应用于 table 时除外，对于 table，hidden 用于解决边框冲突。）

以下示例首先对 <p> 元素设置了瘦黑边框，然后展示了 outline-style 属性在设置不同值的情况下的不同样式。

示例：
CSS Outline

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                border: 1px solid black;
                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>
        <p class="dotted">A dotted outline</p>
        <p class="dashed">A dashed outline</p>
        <p class="solid">A solid outline</p>
        <p class="double">A double outline</p>
        <p class="groove">A groove outline</p>
        <p class="ridge">A ridge outline</p>
        <p class="inset">An inset outline</p>
        <p class="outset">An outset outline</p>
    </body>
</html>

注意：只有在设置了 outline-style 属性的情况下，以下 outline 属性的设置才会起作用。

Outline Color

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

name - 指定颜色的名称，例如“red”。
Hex - 指定 hex 值，例如“#ff0000”。
RGB - 指定 RGB 值，例如“rgb(255,0,0)”。
invert - 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见的。

示例：

p {
    border: 1px solid black;
    outline-style: double;
    outline-color: red;
}

Outline Width

outline-width 属性用以指定轮廓的宽度。
可以将宽度设置为具体的值或预定义值（thin、medium、thick）。

示例：
CSS Outline

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                border: 1px solid black;
            }

            p.one {
                outline-style: double;
                outline-color: red;
                outline-width: thick;
            }

            p.two {
                outline-style: double;
                outline-color: green;
                outline-width: 3px;
            }
        </style>
    </head>
    <body>
        <p class="one">This is some text.</p>
        <p class="two">This is some text.</p>
    </body>
</html>

Outline - Shorthand property

为了简化代码，将所有的单一属性指定在一个属性中是可行的。
outline 属性是以下单一属性的简化版：

outline-width
outline-style (required)
outline-color

示例：
CSS Outline

<!DOCTYPE html>
<html>
    <head>
        <style>
            p {
                border: 1px solid black;
                outline: 5px dotted red;
            }
        </style>
    </head>
    <body>
        <p>
            <b>Note:</b> IE8 supports the outline properties only if a !DOCTYPE is specified.
        </p>
    </body>
</html>

柯南道尔2606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础（005_轮廓）

原始网址：http://www.w3schools.com/css/css_outline.asp翻译：CSS OutlineCSS OutlineCSS 的 outline 属性用以指定轮廓的样式、颜色和宽。轮廓是围绕元素（边框之外）的线条，用以“凸显”元素。然而，outline 属性和 border 属性是不同的，outline 不是元素范围的部分；元素的总宽和高不
复制链接

扫一扫