CSS轮廓
轮廓线是围绕边界（border）外的元素绘制的线，以使元素“脱颖而出”。
CSS具有以下轮廓属性：
- outline-style
- outline-color
- outline-width
- outline-offset
- outline
轮廓样式
outline-style属性指定轮廓的样式，并且可以具有以下值之一：- dotted - 定义虚线轮廓
- dashed - 定义虚线轮廓
- solid - 定义实线轮廓
- double - 定义双重轮廓
- groove - 定义3D凹槽轮廓
- ridge - 定义3D脊状轮廓
- inset - 定义3D插图轮廓
- outset - 定义3D开始轮廓
- none - 没有定义轮廓
- hidden - 定义隐藏的轮廓
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>教程（jc2182.com）</title>
-
<style>
-
p {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>
-
-
<h2>outline-style属性</h2>
-
-
<p class="dotted">虚线轮廓</p>
-
<p class="dashed">虚线轮廓</p>
-
<p class="solid">实线轮廓</p>
-
<p class="double">双重轮廓</p>
-
<p class="groove">凹槽轮廓。效果取决于轮廓颜色值。</p>
-
<p class="ridge">山脊轮廓。效果取决于轮廓颜色值。</p>
-
<p class="inset">内凹轮廓。效果取决于轮廓颜色值。</p>
-
<p class="outset">外凸轮廓。效果取决于轮廓颜色值。</p>
-
-
</body>
- </html>
轮廓颜色
outline-color属性用于设置轮廓的颜色。颜色可以通过以下方式设置：- name - 指定颜色名称，如“red”
- RGB - 指定RGB值，例如“rgb（255,0,0）”
- 十六进制 - 指定十六进制值，如“＃ff0000”
- invert - 执行颜色反转（确保轮廓可见，无论颜色背景如何）
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>蝴蝶教程（jc2182.com）</title>
-
<style>
-
p.ex1 {
-
border: 1px solid black;
-
outline-style: solid;
-
outline-color: red;
-
}
-
-
p.ex2 {
-
border: 1px solid black;
-
outline-style: double;
-
outline-color: green;
-
}
-
-
p.ex3 {
-
border: 1px solid black;
-
outline-style: outset;
-
outline-color: yellow;
-
}
-
</style>
-
</head>
-
<body>
-
-
<h2>边框色属性</h2>
-
-
<p class="ex1">红色实线轮廓</p>
-
<p class="ex2">绿色双线轮廓</p>
-
<p class="ex3">黄色外突轮廓</p>
-
-
</body>
- </html>
轮廓宽度
outline-width属性指定轮廓的宽度，并且可以具有以下值之一：- thin （通常为1px）
- medium （通常为3px）
- thick（通常为5px）
- 特定尺寸（以px，pt，cm，em等为单位）
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta charset="utf-8">
-
<title>蝴蝶教程（jc2182.com）</title>
-
<style>
-
p.ex1 {
-
border: 1px solid black;
-
outline-style: solid;
-
outline-color: red;
-
outline-width: thin;
-
}
-
-
p.ex2 {
-
border: 1px solid black;
-
outline-style: solid;
-
outline-color: red;
-
outline-width: medium;
-
}
-
-
p.ex3 {
-
border: 1px solid black;
-
outline-style: solid;
-
outline-color: red;
-
outline-width: thick;
-
}
-
-
p.ex4 {
-
border: 1px solid black;
-
outline-style: solid;
-
outline-color: red;
-
outline-width: 4px;
-
}</style>
-
</head>
-
<body>
-
-
<h2>outline-width 属性</h2>
-
-
<p class="ex1">一个 thin 轮廓</p>
-
<p class="ex2">一个 medium 轮廓</p>
-
<p class="ex3">一个 thick 轮廓</p>
-
<p class="ex4">一个 4px 轮廓</p>
-
-
</body>
- </html>
所有CSS轮廓属性
| 属性 | 描述 |
|---|---|
| 在一个声明中设置轮廓宽度、轮廓样式和轮廓颜色的简写属性 | |
| 设置轮廓的颜色 | |
| 指定轮廓与元素的边或边框之间的间距 | |
| 设置轮廓的样式 | |
| 设置轮廓的宽度 |