【CSS】轮廓（outline）

最新推荐文章于 2024-04-30 10:53:55 发布

韩韩二水

最新推荐文章于 2024-04-30 10:53:55 发布

阅读量475

点赞数

分类专栏： 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>

在这里插入图片描述

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
在这里插入图片描述

所有CSS 轮廓（outline）属性

“CSS” 列中的数字表示哪个CSS版本定义了该属性(CSS1 或者CSS2)。
在这里插入图片描述

1.outline是不占空间的，既不会增加额外的width或者height（这样不会导致浏览器渲染时出现reflow或是repaint）

2.outline有可能是非矩形的（火狐浏览器下）。

韩韩二水

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【CSS】轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。轮廓（outline）实例本例演示使用outline属性在元素周围画一条线。&lt;style&gt;p{ border:1px solid red; outline:green dotted thick; }&lt;/style&g...
复制链接

扫一扫

专栏目录