提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > css outline-style属性怎样用【css教程】,css,outline-style属性

表面是绘制于元素四周的一条线,位于边框边沿的外围。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网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css outline-style属性怎样用【css教程】,css,outline-style属性"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线