📌  相关文章
📜  HTML | DOM 样式 outlineStyle 属性(1)

📅  最后修改于: 2023-12-03 15:01:12.851000             🧑  作者: Mango

HTML | DOM 样式 outlineStyle 属性

介绍

outline-style 属性指定一个轮廓的样式，该轮廓是围绕一个元素边缘的可见线条，不占据空间。这个属性是 outline 属性的一个子属性，outline 属性是一个合成属性，用于设置轮廓的宽度、样式和颜色。

语法
outline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
属性值
  • none：没有轮廓。
  • dotted：轮廓是一系列点。点的粗细取决于 outline-width 的值。
  • dashed：轮廓是一系列短线。线的粗细取决于 outline-width 的值。
  • solid：轮廓是一条实线。线的粗细取决于 outline-width 的值。
  • double：轮廓是两条平行实线。线的粗细取决于 outline-width 的值。
  • groove：轮廓仿佛在边框外面切了一个沟槽。看起来像是三维的一样。
  • ridge：轮廓仿佛在边框上凸起。看起来像是三维的一样。
  • inset：轮廓仿佛在边框向内凹陷。看起来像是三维的一样。
  • outset：轮廓仿佛在边框向外凸起。看起来像是三维的一样。
  • initial：设置属性为默认值。
  • inherit：从父元素继承属性。
示例
示例1

以下示例展示了如何设置轮廓样式为 dotted：

<!DOCTYPE html>
<html>
<head>
	<title>outlineStyle属性示例</title>
	<style>
		div{
			outline-style: dotted;
			outline-color: red;
			outline-width: 5px;
		}
	</style>
</head>
<body>
	<div>这是一个div元素。</div>
</body>
</html>

结果如下：

示例1效果图

示例2

以下示例展示了如何设置轮廓样式为 double：

<!DOCTYPE html>
<html>
<head>
	<title>outlineStyle属性示例</title>
	<style>
		div{
			outline-style: double;
			outline-color: red;
			outline-width: 5px;
		}
	</style>
</head>
<body>
	<div>这是一个div元素。</div>
</body>
</html>

结果如下：

示例2效果图

浏览器兼容性

| IE | Firefox | Chrome | Safari | Opera | |----|--------|--------|--------|-------| | 8.0 | 1.0 | 1.0 | 1.0 | 7.0 |

参考链接