旗下导航:搜·么
当前位置:网站首页 > CSS > 正文

css outline-style属性怎样用【css教程】

作者:搜搜PHP网发布时间:2019-11-26分类:CSS浏览:96


导读:表面是绘制于元素四周的一条线,位于边框边沿的外围。outline-style属性用于设置元素的全部表面的款式;不能设置该属性的值为none,不然表面不会涌现。c...
表面是绘制于元素四周的一条线,位于边框边沿的外围。outline-style属性用于设置元素的全部表面的款式;不能设置该属性的值为 none,不然表面不会涌现。

css outline-style属性怎样用?

outline-style属性用于设置元素的全部表面的款式。款式不能是 none,不然表面不会涌现。

语法:

outline-style : none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit;

属性值:

● 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-style 属性需一直在 outline-color 属性之前声明 ,由于元素只要取得表面今后才转变其表面的色彩。

解释:

outline是缭绕元素,它是缭绕元素的边距;然则,它是来自差别的边框属性。

表面不是元素尺寸的一部分,因而元素的宽度和高度属性不包括表面的宽度。表面线不会占有空间,也不一定是矩形。

css outline-style属性 示例

<!DOCTYPE>
<html>

	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			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>

结果图:

以上就是css outline-style属性怎样用的细致内容,更多请关注ki4网别的相干文章!

标签:cssoutline-style属性