CSS轮廓

最新推荐文章于 2022-08-04 15:21:51 发布

冷月醉雪

最新推荐文章于 2022-08-04 15:21:51 发布

阅读量336

点赞数

分类专栏： CSS 实例 CSS 文章标签： CSS 轮廓实例

本文链接：https://blog.csdn.net/lengyuezuixue/article/details/81182512

版权

CSS 同时被 2 个专栏收录

53 篇文章 1 订阅

订阅专栏

CSS 实例

22 篇文章 0 订阅

订阅专栏

围绕一个元素(outline),绘制一条线

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p{
				border:1px solid red; 
				outline:green dotted thick;
			}
		</style>
	</head>
	<body>
		<p><b>注意:</b> 如果只有一个 !DOCTYP E指定 IE8 支持 outline 属性。</p>
	</body>
</html>

设置轮廓的样式

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</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">点线轮廓</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>
</html>

设置轮廓的颜色

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style>
			p {
				border:1px solid red;
				outline-style:dotted;
				outline-color:#00ff00;
			}
			
		</style>
	</head>
	<body>
		<p><b>注意:</b> 如果只有一个 !DOCTYPE 指定 IE 8 支持 outline 属性。</p>
	</body>
</html>

设置轮廓的宽度

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</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">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>
</html>

参考：

https://www.yuque.com/docs/share/3d05eb29-da91-42ff-a49f-963d69ea8e89

冷月醉雪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS轮廓

围绕一个元素(outline),绘制一条线&lt;!DOCTYPE html &gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;自学教程(如约智惠.com)&lt;/title&gt; &lt;style&gt; p{ border:1px so
复制链接

扫一扫

专栏目录