关于IT基础

↩ zhcn 编程语言 Web相关 JSON 非公開: CSS（大纲）

CSS（大纲）

轮廓是围绕元素外围（靠近边框）绘制的线，主要用于强调元素，如下图所示。

轮廓和边框非常相似，但也并非没有差异。例如：

  • 元素四向边框的样式、宽度和颜色可以单独设置，但元素四向轮廓的宽度、样式和颜色是相同的，不能单独设置。
  • 边框的宽度直接影响元素的大小，但轮廓不占用页面上的任何空间，也不影响页面的布局，尽管轮廓与页面上的其他元素重叠。
  • 轮廓不会影响周围的元素，除了重叠之外。
  • 边框是元素大小的一部分，但轮廓不是。也就是说，无论轮廓的宽度如何，元素的大小都保持不变。
  • 轮廓可以是非矩形的，但不能直接创建圆形轮廓。

您可以使用以下属性设置元素的轮廓：

  • 轮廓颜色：设置轮廓颜色。
  • 轮廓样式：设置轮廓样式。
  • 轮廓宽度：设置轮廓宽度。
  • Outline：轮廓的简写属性。您可以使用轮廓属性同时设置以上三个轮廓属性。
  • 轮廓偏移：设置轮廓与边框之间的距离。

1.outline-style-轮廓样式

Outline-style 属性允许你设置轮廓的样式，该属性的可选值有：

价值解释
没有任何默认，无轮廓
点缀的定义点状轮廓
虚线定义虚线轮廓
坚硬的定义一条实线
双倍的定义双实线轮廓。两条实线之间的宽度等于轮廓宽度值。
槽根据轮廓颜色值定义 3D 凹槽的轮廓。
岭定义 3D 凹槽轮廓。具体效果取决于outline-color的值
插图根据轮廓颜色值定义 3D 凹形轮廓。
一开始根据轮廓颜色的值定义 3D 凸轮廓。
继承从父元素继承轮廓样式设置

[示例] 使用Outline-style属性设置轮廓样式。

 <!DOCTYPE html>
<html>
<head>
    <style>
        span {
            display: block;
            width: 100px;
            height: 100px;
            margin: 10px;
            float: left;
            text-align: center;
            line-height: 100px;
            /*輪廓の効果がより直感的に分かるよう、予め輪廓の幅と色を設定する*/
            outline-width: 8px;
            outline-color: #AAAAAA;
        }
        .dotted {
            outline-style: dotted;
        }
        .dashed {
            outline-style: dashed;
        }
        .solid {
            outline-style: solid;
        }
        .double {
            outline-style: double;
        }
        .groove {
            outline-style: groove;
        }
        .ridge {
            outline-style: ridge;
        }
        .inset {
            outline-style: inset;
        }
        .outset {
            outline-style: outset;
        }
    </style>
</head>
<body>
    <span class="dotted">点線</span>
    <span class="dashed">破線</span>
    <span class="solid">実線</span>
    <span class="double">二重線</span>
    <span class="groove">グルーブ</span>
    <span class="ridge">リッジ</span>
    <span class="inset">インセット</span>
    <span class="outset">アウトセット</span>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_605”对齐=“aligncenter”宽度=“978”] 图：轮廓样式属性演示图：轮廓样式属性演示[/caption]

注意：轮廓的默认样式为“无”，因此您必须为元素周围出现的轮廓指定轮廓样式。

2.outline-width（轮廓宽度）

Outline-width属性用于设置轮廓的宽度，只有当outline-style属性的值不为none时，outline-width属性才生效。outline-width属性的可选值有：如下。

价值解释
薄的缩小轮廓
中等的默认情况下，设置中等宽度的轮廓
厚的加粗轮廓
长度使用特定值和单位（px、em、cm 等）设置轮廓宽度。
继承从父元素继承轮廓宽度

[示例] 使用 Outline-width 属性设置轮廓宽度。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 300px;
            height: 150px;
            outline-style: solid;
            outline-width: 5px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_606”对齐=“aligncenter”宽度=“1024”] 图：Outline-width 属性演示图：Outline-width 属性演示[/caption]

3.outline-color（轮廓颜色）

Outline-color属性用于设置轮廓颜色，该属性的可选值有：

价值解释
颜色指定轮廓颜色的方式与使用颜色和边框颜色等属性设置颜色的方式相同。特定颜色可以以颜色名称、十六进制代码和 RGB 值的形式定义。
倒置使用背景颜色的反色设置轮廓颜色。仅适用于 IE 和 Opera 浏览器。
继承继承父元素的轮廓颜色设置

注意：如果仅设置轮廓宽度或轮廓颜色属性，则轮廓设置无效。在使用 Outline-width 和 Outline-color 属性设置轮廓宽度和颜色之前，必须使用 Outline-style 属性设置轮廓样式。

[示例] 使用 Outline-color 属性设置轮廓颜色。

 <!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #CCC;
        }
        p.one {
            outline-style: solid;
            outline-width: 5px;
            outline-color: red;
        }
        p.two {
            outline-style: groove;
            outline-width: 6px;
            outline-color: #AAA;
        }
        p.three {
            outline-style: inset;
            outline-width: 5px;
            outline-color: rgb(217, 0, 217);
        }
    </style>
</head>
<body>
    <p class="one">赤</p>
    <p class="two">#AAA</p>
    <p class="three">rgb(217, 0, 217)</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_607”对齐=“aligncenter”宽度=“1024”] 图：轮廓颜色属性演示图：轮廓颜色属性演示[/caption]

四、概述

Outline属性是上面列出的三个属性（outline-width、outline-style和outline-color）的缩写。outline属性允许你同时设置这三个属性中的一个或多个。语法格式为如下。

轮廓：轮廓宽度轮廓样式轮廓颜色；

使用outline属性时，outline-width、outline-style、outline-color参数的顺序并不固定，你可以按照上面语法中介绍的顺序，也可以根据自己的喜好改变顺序。

[示例] 使用outline属性设置元素的轮廓。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.one {
            outline: solid 5px red;
        }
        p.two {
            outline: #AAA groove 6px;
        }
        p.three {
            outline: 5px inset rgb(217, 0, 217);
        }
    </style>
</head>
<body>
    <p class="one">赤色</p>
    <p class="two">#AAA</p>
    <p class="three">rgb(217、0、217)</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_608”对齐=“aligncenter”宽度=“1024”] 图：属性演示概述图：属性演示概述[/caption]
5. 轮廓偏移

默认情况下，轮廓靠近边框。轮廓和边框之间的距离可以通过outline-offset属性设置，可选值有：

价值解释
长度以特定值和单位格式设置轮廓和边框之间的距离。单位也可以是负值
继承从父元素继承 Outline-offset 属性的值

[示例] 使用outline-offset 设置轮廓与边框的距离。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 50px 0px 0px 50px;
            border: 1px solid red;
            outline: 6px inset #AAA;
            outline-offset: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_609”对齐=“aligncenter”宽度=“866”] 图：Outline-Offset 属性演示图：Outline-Offset 属性演示[/caption]
轮廓是围绕元素外围（靠近边框）绘制的线，主要用于强调元素，如下图所示。

轮廓和边框非常相似，但也并非没有差异。例如：

  • 元素四向边框的样式、宽度和颜色可以单独设置，但元素四向轮廓的宽度、样式和颜色是相同的，不能单独设置。
  • 边框的宽度直接影响元素的大小，但轮廓不占用页面上的任何空间，也不影响页面的布局，尽管轮廓与页面上的其他元素重叠。
  • 轮廓不会影响周围的元素，除了重叠之外。
  • 边框是元素大小的一部分，但轮廓不是。也就是说，无论轮廓的宽度如何，元素的大小都保持不变。
  • 轮廓可以是非矩形的，但不能直接创建圆形轮廓。

您可以使用以下属性设置元素的轮廓：

  • 轮廓颜色：设置轮廓颜色。
  • 轮廓样式：设置轮廓样式。
  • 轮廓宽度：设置轮廓宽度。
  • Outline：轮廓的简写属性。您可以使用轮廓属性同时设置以上三个轮廓属性。
  • 轮廓偏移：设置轮廓与边框之间的距离。

1.outline-style-轮廓样式

Outline-style 属性允许你设置轮廓的样式，该属性的可选值有：

价值解释
没有任何默认，无轮廓
点缀的定义点状轮廓
虚线定义虚线轮廓
坚硬的定义一条实线
双倍的定义双实线轮廓。两条实线之间的宽度等于轮廓宽度值。
槽根据轮廓颜色值定义 3D 凹槽的轮廓。
岭定义 3D 凹槽轮廓。具体效果取决于outline-color的值
插图根据轮廓颜色值定义 3D 凹形轮廓。
一开始根据轮廓颜色的值定义 3D 凸轮廓。
继承从父元素继承轮廓样式设置

[示例] 使用Outline-style属性设置轮廓样式。

 <!DOCTYPE html>
<html>
<head>
    <style>
        span {
            display: block;
            width: 100px;
            height: 100px;
            margin: 10px;
            float: left;
            text-align: center;
            line-height: 100px;
            /*輪廓の効果がより直感的に分かるよう、予め輪廓の幅と色を設定する*/
            outline-width: 8px;
            outline-color: #AAAAAA;
        }
        .dotted {
            outline-style: dotted;
        }
        .dashed {
            outline-style: dashed;
        }
        .solid {
            outline-style: solid;
        }
        .double {
            outline-style: double;
        }
        .groove {
            outline-style: groove;
        }
        .ridge {
            outline-style: ridge;
        }
        .inset {
            outline-style: inset;
        }
        .outset {
            outline-style: outset;
        }
    </style>
</head>
<body>
    <span class="dotted">点線</span>
    <span class="dashed">破線</span>
    <span class="solid">実線</span>
    <span class="double">二重線</span>
    <span class="groove">グルーブ</span>
    <span class="ridge">リッジ</span>
    <span class="inset">インセット</span>
    <span class="outset">アウトセット</span>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_605”对齐=“aligncenter”宽度=“978”] 图：轮廓样式属性演示图：轮廓样式属性演示[/caption]

注意：轮廓的默认样式为“无”，因此您必须为元素周围出现的轮廓指定轮廓样式。

2.outline-width（轮廓宽度）

Outline-width属性用于设置轮廓的宽度，只有当outline-style属性的值不为none时，outline-width属性才生效。outline-width属性的可选值有：如下。

价值解释
薄的缩小轮廓
中等的默认情况下，设置中等宽度的轮廓
厚的加粗轮廓
长度使用特定值和单位（px、em、cm 等）设置轮廓宽度。
继承从父元素继承轮廓宽度

[示例] 使用 Outline-width 属性设置轮廓宽度。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div{
            width: 300px;
            height: 150px;
            outline-style: solid;
            outline-width: 5px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_606”对齐=“aligncenter”宽度=“1024”] 图：Outline-width 属性演示图：Outline-width 属性演示[/caption]

3.outline-color（轮廓颜色）

Outline-color属性用于设置轮廓颜色，该属性的可选值有：

价值解释
颜色指定轮廓颜色的方式与使用颜色和边框颜色等属性设置颜色的方式相同。特定颜色可以以颜色名称、十六进制代码和 RGB 值的形式定义。
倒置使用背景颜色的反色设置轮廓颜色。仅适用于 IE 和 Opera 浏览器。
继承继承父元素的轮廓颜色设置

注意：如果仅设置轮廓宽度或轮廓颜色属性，则轮廓设置无效。在使用 Outline-width 和 Outline-color 属性设置轮廓宽度和颜色之前，必须使用 Outline-style 属性设置轮廓样式。

[示例] 使用 Outline-color 属性设置轮廓颜色。

 <!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: #CCC;
        }
        p.one {
            outline-style: solid;
            outline-width: 5px;
            outline-color: red;
        }
        p.two {
            outline-style: groove;
            outline-width: 6px;
            outline-color: #AAA;
        }
        p.three {
            outline-style: inset;
            outline-width: 5px;
            outline-color: rgb(217, 0, 217);
        }
    </style>
</head>
<body>
    <p class="one">赤</p>
    <p class="two">#AAA</p>
    <p class="three">rgb(217, 0, 217)</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_607”对齐=“aligncenter”宽度=“1024”] 图：轮廓颜色属性演示图：轮廓颜色属性演示[/caption]

四、概述

Outline属性是上面列出的三个属性（outline-width、outline-style和outline-color）的缩写。outline属性允许你同时设置这三个属性中的一个或多个。语法格式为如下。

轮廓：轮廓宽度轮廓样式轮廓颜色；

使用outline属性时，outline-width、outline-style、outline-color参数的顺序并不固定，你可以按照上面语法中介绍的顺序，也可以根据自己的喜好改变顺序。

[示例] 使用outline属性设置元素的轮廓。

 <!DOCTYPE html>
<html>
<head>
    <style>
        p.one {
            outline: solid 5px red;
        }
        p.two {
            outline: #AAA groove 6px;
        }
        p.three {
            outline: 5px inset rgb(217, 0, 217);
        }
    </style>
</head>
<body>
    <p class="one">赤色</p>
    <p class="two">#AAA</p>
    <p class="three">rgb(217、0、217)</p>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_608”对齐=“aligncenter”宽度=“1024”] 图：属性演示概述图：属性演示概述[/caption]
5. 轮廓偏移

默认情况下，轮廓靠近边框。轮廓和边框之间的距离可以通过outline-offset属性设置，可选值有：

价值解释
长度以特定值和单位格式设置轮廓和边框之间的距离。单位也可以是负值
继承从父元素继承 Outline-offset 属性的值

[示例] 使用outline-offset 设置轮廓与边框的距离。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            margin: 50px 0px 0px 50px;
            border: 1px solid red;
            outline: 6px inset #AAA;
            outline-offset: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_609”对齐=“aligncenter”宽度=“866”] 图：Outline-Offset 属性演示图：Outline-Offset 属性演示[/caption]

最新文章列表

IT基礎ロゴ

这是一个通过简明易懂的方式解说了解IT行业时需要掌握的IT基础知识的网站。

关于IT基础

关于IT基础

使用条款

隐私政策

联系方式

RSS

推荐环境 / 建议环境

科技

新闻

最新技术

人工智能

游戏

Windows

手机

安全

DevOps

网络

数据库

计算机硬件

商业

数字营销

数据可视化

设计

业务运营

客户服务

人力资源管理

协作

销售与市场营销

初创公司

金融科技

平台

Android

IOS

应用程序

Windows

MACOS

网页领域

LINUX

GOOGLE

CHROME BOOK

教育科技

关于IT基础@2024 All rights reseved