CSS Outline轮廓
2023-01-06 11:36 更新
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 |
以上内容是否对您有帮助：
← CSS 边框
更多建议：