CSS轮廓设置

最新推荐文章于 2024-10-01 22:32:30 发布

HZS_Song

最新推荐文章于 2024-10-01 22:32:30 发布

阅读量643

点赞数 1

文章标签： css css3

本文链接：https://blog.csdn.net/qq_41696334/article/details/104254406

版权

CSS轮廓设置

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

设置轮廓样式

outline-style

outline-style属性用于设置元素的整个轮廓的样式。样式不能是none，否则轮廓不会出现。
注意：请始终在outline-color属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
轮廓线不会占据空间，也不一定是矩形
JavaScript语法👇

	object.style.outlineStyle="dotted"

值	描述
`none`	默认。定义无轮廓。
`dotted`	定义点状的轮廓。
`dashed`	定义虚线轮廓。
`solid`	定义实线轮廓。
`double`	定义双线轮廓。双线的宽度等同于 `outline-width`的值。
`groove`	定义 3D 凹槽轮廓。此效果取决于 `outline-color`值。
`ridge`	定义 3D 凸槽轮廓。此效果取决于 `outline-color` 值。
`inset`	定义 3D 凹边轮廓。此效果取决于`outline-color` 值。
`outset`	定义 3D 凸边轮廓。此效果取决于 `outline-color` 值。
`inherit`	规定应该从父元素继承轮廓样式的设置。

设置轮廓颜色

注意：请始终在outline-color属性之前声明outline-style属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
outline-color属性设置一个元素整个轮廓中可见部分的颜色。
JavaScript语法👇

object.style.outlineColor="#0000FF"

值	描述
color_name	规定颜色值为样册名称的轮廓颜色（比如red）
hex_number	规定颜色值为十六进制值的轮廓颜色（比如#ff0000）
rgb_number	规定颜色值为rgb代码的轮廓颜色（比如rgb(255，0，0))
`invert`	默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
`inherit`	规定应该从父元素继承轮廓颜色的设置。

设置轮廓的宽度

注意：请始终在outline-width属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。
宽度不允许是负数
JavaScript语法👇

object.style.outlineWidth="thin"

值	描述
`thin`	规定细轮廓
`medium`	默认。规定中等的轮廓
`thick`	规定粗的轮廓
length	允许您规定轮廓粗细的值
`inherit`	规定应该从父元素继承轮廓宽度的设置

简写轮廓样式

为简单起见，可以将上面三个轮廓样式属性合并为一个方便的属性：outline。

outline

outline的值可以按任何顺序列出，且这些值都可以忽略。
JavaScript语法👇

object.style.outline="#0000FF dotted thin"

DEMO

<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
			p {
				text-align:center;
				border:red solid thin;
				outline:#00ff00 dotted thick;
			}
		</style>
	</head>
	<body>
		<p>中国加油！ 武汉加油！</p>
	</body>
</html>

👇运行结果👇