out-line

<css 七>out-line_第1张图片

轮廓样式:(实例,附带颜色)

<!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>

效果:

<css 七>out-line_第2张图片

轮廓颜色:

<!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;
		}	
注:宽度可能无法使用%作为单位。



你可能感兴趣的:(out-line)