您的位置：首页 > Web前端 > CSS

<css 七>out-line

2016-04-04 08:46 495 查看

轮廓样式：（实例，附带颜色）

<!DOCTYPE html>
<html>
<head>
<title>outline相关</title><meta charset="utf-8"	/>
<style type="text/css">
h1,p{
font-family:微软雅黑;
font-size:25px;
width:250px;
}
p.a{
outline-style:none;
}
p.b{
outline-style:dotted;
}
p.c{
outline-style:dashed;
}
p.d{
outline-style:solid;
}
p.e{
outline-style:double;
}
p.A{
outline:groove green 10px;
}
p.B{
outline:ridge orange 10px;
}
p.C{
outline:inset gray 10px;
}
p.D{
outline:outset aqua 10px;
}
</style>
</head>
<body>
<h1>outline-style相关的值：</h1>
<p class="a">none 无轮廓</p>
<p class="b">dotted	定义点状的轮廓</p>
<p class="c">dashed	定义虚线轮廓</p>
<p class="d">solid	定义实线轮廓</p>
<p class="e">double	定义双线轮廓。双线的宽度等同于 outline-width 的值</p>
<p class="A">groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值</p>
<p class="B">ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值</p>
<p class="C">inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值</p>
<p class="D">outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值</p>
</body>
</html>

效果：

轮廓颜色:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{
outline-color:aqua/#00ffff/0,255,255;
}
</style>
</head>
<body>
<p>dotted定义点状的轮廓</p>
</body>

轮廓宽度：

p{
outline-width:50px/em/cm;
}
注:宽度可能无法使用%作为单位。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

&lt;css 七&gt;out-line

<css 七>out-line