这篇文章需要技术复核。如何帮忙。

这篇文章需要文法复核。如何帮忙。

概述

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

轮廓与边框在以下几个方面存在不同:

  • 轮廓不占据空间,它们被描绘于内容之上
  • 轮廓可以是非矩形的。在Gecko/Firefox中,轮廓是矩形的,但是Opera则会围绕元素结构绘制非矩形的形状,如下图
    TEXTTEXTTEXT
初始值as each of the properties of the shorthand:
适用元素all elements
是否是继承属性
适用媒体visual, interactive
计算值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 rgb(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;

取值

任意顺序的1~3个属性值

<'outline-width'>
See outline-width.
<'outline-style'>
See outline-style.
<'outline-color'>
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
outline
Candidate Recommendation No change.
CSS Level 2 (Revision 1)
outline
Recommendation  

浏览器兼容性

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,