css轮廓之outline属性的用法笔记

原创 PHP笔记  2017-03-24 17:16  阅读 1,164 views 次

轮廓(outline)是绘制在html元素周围的一条线,在边框边缘的外围。css outline 属性设定了元素轮廓的样式、颜色以及宽度,使元素更加突出。

轮廓css属性

  • outline:简写属性,设置所有的轮廓属性。
  • outline-style:轮廓的样式。
  • outline-color:轮廓的颜色。
  • outline-width:轮廓的宽度。

1、outline-style属性

outline-style属性设置了轮廓的样式,让html元素与众不同。

实例:

......
<body>
<style type="text/css">
#a{outline-style: dotted}
#b{outline-style: solid}
#c{outline-style: double}
</style>
<p id="a">轮廓(outline)样式示例</p>
<p id="b">轮廓(outline)样式示例</p>
<p id="c">轮廓(outline)样式示例</p>
</body>
......

运行结果:

 

2、outline-color属性

outline-color属性设置了轮廓的颜色,使html元素更加绚丽多彩。

实例:

......
<body>
<style type="text/css">
#a{outline-style: dotted;outline-color:#00ff00;}
#b{outline-style: solid;outline-color:#FF0000;}
#c{outline-style: double;outline-color:#9932CC;}
</style>
<p id="a">轮廓(outline)颜色示例1</p>
<p id="b">轮廓(outline)颜色示例2</p>
<p id="c">轮廓(outline)颜色示例3</p>
</body>
......

运行结果:

 

3、outline-width属性

outline-width属性设置了轮廓的宽度,使html元素显得井井有条。

实例:

......
<body>
<style type="text/css">
#a{outline-style: solid;outline-width:1px;}
#b{outline-style: solid;outline-width:3px;}
#c{outline-style: solid;outline-width:5px;}
</style>
<p id="a">轮廓(outline)宽度示例1</p>
<p id="b">轮廓(outline)宽度示例2</p>
<p id="c">轮廓(outline)宽度示例3</p>
</body>
......

运行结果:

 

4、outline属性

outline属性设置了轮廓的样式、颜色、宽度,使html元素丰富多彩。

实例:

......
<body>
<style type="text/css">
p{border:1px solid red;}
#b{outline:#00ff00 dotted 5px;}
</style>
<p id="a">没使用轮廓(outline)示例</p>
<p id="b">轮廓(outline)示例</p>
</body>
......

 

运行结果:

本文地址:https://www.ggbiji.com/css-outline.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情