【CSS】轮廓（outline）

最新推荐文章于 2023-09-19 08:25:33 发布

韩韩二水

最新推荐文章于 2023-09-19 08:25:33 发布

阅读量498

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43885779/article/details/86664865

版权

CSS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

轮廓（outline）实例

本例演示使用outline属性在元素周围画一条线。

<style>
p{
	border:1px solid red;
	outline:green dotted thick;
 }
</style>
<body>
	<p><b>注意:</b> 如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
</body>

在这里插入图片描述

本例演示如何设置轮廓的样式。

<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>
<body>
	<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>
	<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>

在这里插入图片描述

本例演示如何设置轮廓的颜色。

<style>
p {
	border:1px solid red;
	outline-style:dotted;
	outline-color:#00ff00;
}
</style>
<body>
	<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
</body>

在这里插入图片描述

本例演示如何设置轮廓的宽度。

<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>
<body>
	<p class="one">This is some text in a paragraph.</p>
	<p class="two">This is some text in a paragraph.</p>
	<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE8 支持 outline 属性。</p>
</body>

在这里插入图片描述