在码农港湾
做一个实实在在的内行人

CSS Outline轮廓

轮廓是边界的替代。

轮廓线是围绕边框外的元素绘制的线。

+-------------------------------------+
|   Outline                           |  
|   +-----------------------------+   |
|   |Border                       |   |
|   |   +--------------------+    |   |
|   |   |Padding             |    |   |
|   |   |  +--------------+  |    |   |
|   |   |  |Content       |  |    |   |
|   |   |  |              |  |    |   |
|   |   |  +--------------+  |    |   |
|   |   |                    |    |   |
|   |   +--------------------+    |   |
|   |                             |   |
|   +-----------------------------+   |
|                                     |
+-------------------------------------+

我们可以用样式,颜色和宽度来设计轮廓。

outline属性与border属性不同:outline不是元素尺寸的一部分,元素的总宽度和高度不受轮廓宽度的影响。

轮廓不被视为页面的一部分,因此在应用它们时不会导致页面布局被调整。

以下列表描述了与轮廓相关的元素。

  • outline-color
    将颜色设置为轮廓。
    Value: color
  • outline-offset
    设置轮廓的偏移量。
    Value:length
  • outline-style
    设置轮廓的样式。
    此值与border-style属性的值相同。
  • outline-width
    设置轮廓的宽度。
    Value:thin or medium or thick or length
  • outline
    简写属性在单个声明中设置轮廓。
    Value: color style width

轮廓样式

outline-style属性指定轮廓的样式。

下表列出了outline-style的可能值。

描述
none 没有轮廓。 这是默认值
hidden 隐藏轮廓
dotted 点状轮廓
dashed 虚线轮廓
solid 实线轮廓
double 双轮廓
groove 一个3D槽轮廓。 效果取决于轮廓颜色值
ridge 3D垄状轮廓。 效果取决于轮廓颜色值
inset 3D inset 轮廓。 效果取决于轮廓颜色值
outset 3D outset 轮廓。 效果取决于轮廓颜色值
initial 将此属性设置为其默认值。
inherit 从其父元素继承此属性。

仅当指定了!DOCTYPE时,IE8才支持轮廓属性。

以下代码显示如何使用轮廓样式。

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;}

轮廓颜色

outline-color属性设置轮廓的颜色。

p {
    outline-style: dotted;
    outline-color: #00ff00;
}

轮廓宽度

outline-width设置轮廓的宽度。

描述
medium 中等轮廓。这是默认值
thin 细轮廓
thick 粗轮廓
length 允许您定义轮廓的粗细
initial 将此属性设置为其默认值。
inherit 从其父元素继承此属性。

以下代码设置轮廓宽度。

p {
    outline-style: dotted;
    outline-width: 5px;
}

轮廓快捷方式

outline简写属性在一个声明中设置所有轮廓属性。

简写属性具有以下语法:

outline: outline-color, outline-style, outline-width

<!DOCTYPE html>
<html>
<head>
<style>
p {
    border: 1px solid red;
    outline: green dotted thick;
}
</style>
</head>
<body>
<p>This is a test</p>
</body>
</html>

相关属性

属性 描述 CSS
outline-color 设置轮廓颜色 3
outline-offset 设置轮廓偏移 3
outline-style 设置轮廓样式 3
outline-width 设置轮廓宽度 3
outline 轮廓的简写属性 3

码农刷题必备工具 VS 码农进阶必读书籍

IT面试宝典宝典書城

领取限量阿里云产品优惠

今日限时秒杀 & 新用户专享1折起 & 爆款产品5折起

ad5