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 - 定义隐藏的轮廓
以下示例显示了不同的outline-style值:
<!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轮廓属性
属性 | 描述 |
---|---|
outline | 在一个声明中设置轮廓宽度、轮廓样式和轮廓颜色的简写属性 |
outline-color | 设置轮廓的颜色 |
outline-offset | 指定轮廓与元素的边或边框之间的间距 |
outline-style | 设置轮廓的样式 |
outline-width | 设置轮廓的宽度 |