We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


CSSoutline属性是用来设置一个或多个单独的轮廓属性的简写属性 , 例如 outline-style, outline-widthoutline-color。 多数情况下,简写属性更加可取和便捷。


  • 轮廓不占据空间,它们被描绘于内容之上
  • 轮廓可以是非矩形的。在Gecko/Firefox中,轮廓是矩形的,但是Opera则会围绕元素结构绘制非矩形的形状,如下图
初始值as each of the properties of the shorthand:
适用元素all elements
适用媒体as each of the properties of the shorthand:
计算值as each of the properties of the shorthand:
  • outline-color: For the keyword invert, the computed value is invert. For the color value, if the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
  • outline-width: an absolute length; if the keyword none is specified, the computed value is 0
  • outline-style: as specified
Animation typeas each of the properties of the shorthand:
正规顺序order of appearance in the formal grammar of the values


/* 宽度 | 样式 | 颜色 */
outline: 1px solid white;



See outline-width.
See outline-style.
Since Gecko 1.9 (Firefox 3), the value of the element's color property (foreground color) is used. See outline-color.


[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]


outline: solid; | outline: dashed red; | outline: dotted 1px; | outline: ridge thick violet; | outline: custom 5px;

/* two identical declarations */

:link:hover { outline: 1px solid #000; }
:link:hover { outline: solid black 1px; }


Specification Status Comment
CSS Basic User Interface Module Level 3
Proposed Recommendation No change.
CSS Level 2 (Revision 1)


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.5 (1.8) [1] 8.0 7.0 1.2 (125)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 1.0 (1.8) [1] 8.0 6.0 3.1

In browsers previous to Gecko 1.8 (Firefox 1.5) a similar effect can be achieved using Mozilla CSS Extension -moz-outline.

[1] Firefox includes absolutely positioned elements inside the outline (bug 687311).


此页面的贡献者: zhengxinxin, broven, fscholz, Sebastianz, FredWe
最后编辑者: zhengxinxin,