![W3School-CSS 轮廓（Outline)实例]( "W3School-CSS 轮廓（Outline)实例")
CSS 轮廓（Outline)实例
CSS 实例
- CSS 背景实例
- CSS 文本实例
- CSS 字体(font)实例
- CSS 边框(border)实例
- CSS 外边距 (margin) 实例
- CSS 内边距 (padding) 实例
- CSS 列表实例
- CSS 表格实例
轮廓（Outline)实例- CSS 尺寸 (Dimension) 实例
- CSS 分类 (Classification) 实例
- CSS 定位 (Positioning) 实例
- CSS 伪类 (Pseudo-classes)实例
- CSS 伪元素 (Pseudo-elements)实例
01在元素周围画线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>01在元素周围画线</title>
<style type="text/css">
p {
border: darkorange solid thin;
outline: salmon dotted thick;
}
</style>
</head>
<body>
<p>我是一个有border有outline的段落。</p>
</body>
</html>
02设置轮廓的颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>02设置轮廓的颜色</title>
<style type="text/css">
p {
border: darkorange solid thin;
outline-color: skyblue;
outline-style: double;
}
</style>
</head>
<body>
<p>我是一个有border有outline的段落。</p>
</body>
</html>
03设置轮廓的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>03设置轮廓的样式</title>
<style type="text/css">
p {
border: darkorange solid thin;
}
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>
<p class="dotted">A dotted outline</p>
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline</p>
<p class="ridge">A ridge outline</p>
<p class="inset">An inset outline</p>
<p class="outset">An outset outline</p>
</body>
</html>
04设置轮廓的宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>04设置轮廓的宽度</title>
<style type="text/css">
p.one {
border: seagreen solid thin;
outline-style: solid;
outline-width: thin;
}
p.two {
border: seagreen solid thin;
outline-style: dotted;
outline-width: 3px;
}
</style>
</head>
<body>
<p class="one">我是一个段落啊。</p>
<p class="two">我是一个段落啊。</p>
</body>
</html>
