CSS-轮廓（outline）

最新推荐文章于 2022-12-10 03:22:00 发布

Swxctx

最新推荐文章于 2022-12-10 03:22:00 发布

阅读量538

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_28796345/article/details/52075888

版权

H5 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，起到突出元素的作用。

轮廓（outline）属性指定了样式，颜色和外边框的宽度。

属性	说明	值	版本
outline	设置所有的外边框属性	outline-color outline-style outline-width inherit	2
outline-color	设置外边框的颜色	color-name hex-number rgb-number invert inherit	2
outline-style	设置外边框的样式	none dotted dashed solid double groove ridge inset outset inherit	2
outline-width	设置外边框的宽度	thin medium thick length inherit	2

1 轮廓样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>轮廓样式</title>
<style>
p {border:1px solid 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>
<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>
<p><b>注意:</b> 如果只有一个!DOCTYPE则指定IE8支持 outline属性。</p>
</body>
</html>

2 轮廓颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>轮廓颜色</title>
<style>
p{
border:1px solid red;
outline-style:dotted;
outline-color:#99FF00;}
</style>
</head>

<body>
<p>文本</p>
</body>
</html>

3 轮廓宽度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>轮廓宽度</title>
<style>
p.one{
border:1px solid red;
outline-style:solid;
outline-width:thin;}

p.two{
border:1px solid red;
outline-style:dotted;
outline-width:3px;}
</style>
</head>

<body>
<p class="one">文本1</p>
<p class="two">文本2</p>
</body>
</html>