CSS 基础（005_轮廓）

来源：互联网发布：乐视视频下载mac 编辑：程序博客网时间：2024/06/07 05:34

原始网址：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>

0 0