当前阅读教程:CSS入门到精通 > 轮廓样式 outline-style | |||||||||||||||||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||||||||||||||||
上一篇: 轮廓颜色outline-color | 下一篇: 轮廓宽度 outline-width | ||||||||||||||||||||||||||||||
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号 属性定义及使用说明outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围。 outline-style属性指定outline的样式。
提示和注释outline是围绕元素。它是围绕元素的边距。但是,它是来自不同的边框属性。 outline不是元素尺寸的一部分,因此元素的宽度和高度属性不包含轮廓的宽度。 属性值
实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮廓样式 outline-style</title> <!--定义内部样式--> <style> p{ margin: 20px; /*外边距*/ border:1px solid red; /*边框*/ outline-offset: 3px; /*边框和轮廓的距离*/ outline-width: 5px; } .dotted {outline-style: dotted} .dashed {outline-style: dashed} .solid {outline-style: solid} .double {outline-style: double} .groove {outline-style: groove} .ridge {outline-style: ridge} .inset {outline-style: inset} .outset {outline-style: outset} </style> </head> <body> <p>A dotted outline</p> <p>A dashed outline</p> <p>A solid outline</p> <p>A double outline</p> <p>A groove outline</p> <p>A ridge outline</p> <p>An inset outline</p> <p>An outset outline</p> <p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline-style 属性。</p> </body> </html> 效果图 |
|||||||||||||||||||||||||||||||
上一篇: 轮廓颜色outline-color | 下一篇: 轮廓宽度 outline-width |