首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

-moz-outline

outline CSS属性是设置一个或多个单独的轮廓属性的简写属性,outline-styleoutline-width以及outline-color在一个单一的声明中。

代码语言:javascript
复制
/* width | style | color */
outline: 1px solid white;

/* Global values */
outline: inherit;
outline: initial;
outline: unset;

大纲在以下方面与边界不同:

  • 大纲不占用空间,它们被绘制在元素的内容之外。
  • 轮廓可能是非矩形的。它们在Gecko / Firefox中是矩形的,但是Opera例如在这样的结构周围画一个非矩形的形状:

TEXTTEXTEXT

初始值

as each of the properties of the shorthand: outline-color: invert, for browsers supporting it, currentColor for the other outline-style: none outline-width: medium

适用元素

all elements

是否是继承属性

no

适用媒体

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 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

动画类型

as each of the properties of the shorthand: outline-color: a color outline-width: a length outline-style: discrete

正规顺序

order of appearance in the formal grammar of the values

  • outline-colorinvert,对于支持它的浏览器,另一个为currentColor
  • outline-stylenone
  • outline-widthmedium
代码语言:txt
复制
Applies to all elements   [Inherited](inheritance) no   Media visual, interactive   [Computed value](computed_value) as each of the properties of the shorthand:
  • outline-color:关键字invert,计算值为invert。对于颜色值,如果该值是半透明的,则计算值将与rgba()是对应的。如果不是,则rgb()是对应的。transparent关键字映射到rgba(0,0,0,0)
  • outline-width:绝对长度;如果关键字为none,则计算值为0
  • outline-style:具体规定
代码语言:txt
复制
Animation type as each of the properties of the shorthand:
  • outline-color:颜色
  • outline-width:长度
  • outline-style:离散
代码语言:txt
复制
Canonical order order of appearance in the formal grammar of the values  

语法

outline属性被指定为下面列表中的一个,两个或三个值。值的顺序无关紧要。

outline-width设置轮廓的宽度。

outline-style设置轮廓的样式。

outline-color设置轮廓的颜色。自从Gecko 1.9(Firefox 3)后,元素color属性(前景色)的值被用作默认值。

正式语法

代码语言:javascript
复制
[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

示例

轮廓:实心;轮廓:虚红色;轮廓:点状1 px;轮廓:脊厚紫罗兰;轮廓:自定义5 px;

代码语言:javascript
复制
/* Two identical declarations */

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

规范

Specification

Status

Comment

CSS Basic User Interface Module Level 3The definition of 'outline' in that specification.

Candidate Recommendation

No change.

CSS Level 2 (Revision 1)The definition of 'outline' in that specification.

Recommendation

Initial definition.

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support

1.0

(Yes)

1.5 (1.8)1

8.0

7.0

1.2 (125)

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

1.0

(Yes)

1.0 (1.8) 1

8.0

6.0

3.1

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com