🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# CSS outline-style 属性 ## 实例 设置轮廓的样式: ``` p { outline-style:dotted; } ``` ## 浏览器支持 所有浏览器都支持 outline-style 属性。 注释:如果规定了 !DOCTYPE,则 IE8 支持 outline 属性。 ## 定义和用法 outline-style 属性用于设置元素的整个轮廓的样式。样式不能是 none,否则轮廓不会出现。 outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline 属性设置元素周围的轮廓线。 注释:请始终在 outline-color 属性之前声明 outline-style 属性。元素只有获得轮廓以后才能改变其轮廓的颜色。 注释:轮廓线不会占据空间,也不一定是矩形。 | 默认值: | none | | --- | --- | | 继承性: | no | | --- | --- | | 版本: | CSS2 | | --- | --- | | JavaScript 语法: | _object_.style.outlineStyle="dotted" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | none | 默认。定义无轮廓。 | | dotted | 定义点状的轮廓。 | | dashed | 定义虚线轮廓。 | | solid | 定义实线轮廓。 | | double | 定义双线轮廓。双线的宽度等同于 outline-width 的值。 | | groove | 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 | | ridge | 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 | | inset | 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 | | outset | 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 | | inherit | 规定应该从父元素继承轮廓样式的设置。 | ## TIY 实例 [设置轮廓的样式](/tiy/t.asp?f=csse_outline-style) 本例演示如何设置轮廓的样式。 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <style type="text/css"> p { border: red solid thin; } 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">A dotted outline</p> <p class="dashed">A dashed outline</p> <p class="solid">A solid outline</p> <p class="double">A double outline</p> <p class="groove">A groove outline</p> <p class="ridge">A ridge outline</p> <p class="inset">An inset outline</p> <p class="outset">An outset outline</p> <p><b>注释:</b>只有在规定了 !DOCTYPE 时,Internet Explorer 8 (以及更高版本) 才支持 outline-style 属性。</p> </body> </html> ``` ## 相关页面 CSS 教程:[CSS 轮廓](/css/css_outline.asp "CSS 轮廓") CSS 参考手册:[outline 属性](/cssref/pr_outline.asp "CSS outline 属性") HTML DOM 参考手册:[outlineStyle 属性](/jsref/prop_style_outlinestyle.asp "HTML DOM outlineStyle 属性")