更多"Try it Yourself"下面的例子。
定义和用法
大纲是围绕元素绘制的线(outside the borders)使元件"stand out" 。
轮廓式的属性指定轮廓的风格。
默认值: | none |
---|---|
遗传: | no |
动画: | no. Read about animatable |
版: | CSS2 |
JavaScript语法: | object .style.outlineStyle="dashed" Try it |
提示和注意
大纲是围绕一个元素一行。 它是围绕该元件的余量显示。 然而,它是从边界属性不同。
轮廓不元素的尺寸的一部分,因此,该元素的宽度和高度属性不包含轮廓的宽度。
浏览器支持
在表中的数字规定,完全支持该属性的第一个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
outline-style | 1.0 | 8 | 1.5 | 1.2 | 7 |
Note: IE8只支持如果指定了DOCTYPE轮廓式的财产!
CSS语法
outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
属性值
值 | 描述 | 播放 |
---|---|---|
none | 指定没有轮廓。 这是默认 | 播放 ” |
hidden | 指定一个隐藏的轮廓 | 播放 ” |
dotted | 指定虚线轮廓 | 播放 ” |
dashed | 指定虚线轮廓 | 播放 ” |
solid | 指定了坚实的轮廓 | 播放 ” |
double | 指定大纲双 | 播放 ” |
groove | 指定3D沟槽轮廓。 其效果取决于轮廓色值 | 播放 ” |
ridge | 指定3D脊轮廓。 其效果取决于轮廓色值 | 播放 ” |
inset | 指定3D插图轮廓。 其效果取决于轮廓色值 | 播放 ” |
outset | 指定3D突出轮廓。 其效果取决于轮廓色值 | 播放 ” |
initial | 将此属性设置为默认值。 阅读关于初始 | 播放 ” |
inherit | 继承其父元素此属性。 阅读关于继承 |
更多示例
例
设置使用不同的值轮廓的风格:
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;}
试一试» 相关页面
CSS教程: CSS大纲
CSS参考: outline property
HTML DOM参考: outlineStyle property