轮廓宽度 | outline-width (Basic User Interface)

  CSS 中文开发手册

轮廓宽度 | outline-width (Basic User Interface) - CSS 中文开发手册

outline-widthCSS属性设置元素的轮廓的宽度（厚度）。一个轮廓线是围绕着一个元素在border外面画的线。

outline在定义大纲外观时，使用简写属性往往更方便。

/* Keyword values */
outline- thin;
outline- medium;
outline- thick;

/* <length> values */
outline- 1px;
outline- 0.1em;

/* Global values */
outline- inherit;

初始值	medium
适用元素	all elements
是否是继承属性	no
适用媒体	visual, interactive
计算值	an absolute length; if the keyword none is specified, the computed value is 0
Animation type	a length
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

该outline-width属性被指定为下面列出的任何一个值。

值

thin取决于用户代理。在Firefox等桌面浏览器中通常为1 像素。medium取决于用户代理。在Firefox等桌面浏览器中通常为3 像素。thick取决于用户代理。通常在Firefox等桌面浏览器中使用5px。<length>轮廓的宽度指定为<length>。

正式语法

<br-width>where 
<br-width> = <length> | thin | medium | thick

示例

HTML

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

CSS

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline- thin;
}

#medium {
  outline- medium;
}

#thick {
  outline- thick;
}

#twopixels {
  outline- 2px;
}

#oneex {
  outline- 1ex;
}

#em {
  outline- 1.2em;
}

规范

Specification	Status	Comment
CSS Basic User Interface Module Level 3The definition of 'outline-width' in that specification.	Candidate Recommendation	No change.
CSS TransitionsThe definition of 'outline-width' in that specification.	Working Draft	Defines outline-width as animatable.
CSS Level 2 (Revision 1)The definition of 'outline-width' 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 Mobile	Opera Mobile	Safari Mobile
Basic support	?	(Yes)	?	?	?	?

  CSS 中文开发手册

  本文标题：轮廓宽度 | outline-width (Basic User Interface) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32315.html