024_CSS轮廓

最新推荐文章于 2023-02-10 11:33:25 发布

自由与束缚JavaJavaScript

最新推荐文章于 2023-02-10 11:33:25 发布

阅读量131

点赞数

分类专栏： css学习文章标签： css web前端

本文链接：https://blog.csdn.net/aihiao/article/details/109072480

版权

css学习专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1. 轮廓(outline)是绘制于元素周围的一条线, 位于边框边缘的外围, 可起到突出元素的作用。轮廓与边框不同, 轮廓不占用空间。

2. CSS轮廓属性

3. 轮廓的样式

3.1. outline-style 属性用于设置元素的整个轮廓的样式。

3.2. 默认值

3.3. 可能的值

4. 轮廓的颜色

4.1. outline-color属性设置一个元素整个轮廓中可见部分的颜色。

4.2. 请始终在outline-color属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的颜色。

4.3. 默认值

4.4. 可能的值

5. 轮廓的宽度

5.1. outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。

5.2. 请始终在 outline-width 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的宽度。

5.3. 默认值

5.4. 可能的值

5.5. 例子

5.5.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>轮廓的样式</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				margin: 32px;
			}
			p.dotted {
				outline-style: dotted; 
				outline-color: #00ff00; 
				outline-width: thin;
			}
			p.dashed {
				outline-style: dashed; 
				outline-color: #fff000; 
				outline-width: medium;
			}
			p.solid {
				outline-style: solid; 
				outline-color: #ffff00; 
				outline-width: thick;
			}
			p.double {
				outline-style: double; 
				outline-color: #ff0000; 
				outline-width: 1em;
			}
			p.groove {
				outline-style: groove; 
				outline-color: #0000ff; 
				outline-width: 10px;
			}
			p.ridge {
				outline-style: ridge; 
				color: orange;
				outline-color: invert; 
				outline-width: 1rem;
			}
			p.inset {
				outline-style: inset; 
				outline-color: #00ff0f; 
				outline-width: 3mm;
			}
			p.outset {
				outline-style: outset; 
				color: red;
				outline-width: 0.1cm;
			}
		</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时, Internet Explorer 8(以及更高版本)才支持outline-style属性。</p>
	</body>
</html>

5.5.2. 效果图

6. 轮廓

6.1. outline(轮廓)是绘制于元素周围的一条线, 位于边框边缘的外围, 可起到突出元素的作用。

6.2. 轮廓线不会占据空间, 也不一定是矩形。

6.3. outline简写属性在一个声明中设置所有的轮廓属性。

6.4. 可以按顺序设置如下属性:

outline-color
outline-style
outline-width

6.5. 如果不设置其中的某个值, 也不会有问题, 使用默认值。

6.6. 默认值

6.7. 例子

6.7.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>轮廓</title>
		<meta charset="utf-8" />

		<style type="text/css">
			p {
				outline: #00ff00 dotted thick;
			}
		</style>
	</head>
	<body>
		<p><b>注释: </b>只有在规定了!DOCTYPE时, Internet Explorer 8(以及更高版本)才支持outline-style属性。</p>
	</body>
</html>

6.7.2. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

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

1. 轮廓(outline)是绘制于元素周围的一条线, 位于边框边缘的外围, 可起到突出元素的作用。2. CSS outline属性规定元素轮廓的样式、颜色和宽度。3. 轮廓的样式3.1. outline-style 属性用于设置元素的整个轮廓的样式。3.2. 默认值和继承性3.3. 可能的值3.4. 代码<!DOCTYPE html><html> <head> <title>轮廓的样式</title>
复制链接

扫一扫

专栏目录