CSS outline-width用法及代码示例

轮廓线是在元素边界之外的指定元素周围创建的线，以使特定区域与众不同且易于区分。

outline-width属性用于为特定元素指定此轮廓的宽度。

必须先声明或使用outline-style属性，然后才能在所需元素上使用outline-width属性。逻辑上，元素必须具有轮廓，轮廓可以为其定义或设置宽度。

元素的轮廓显示在元素的边周围，并且与border属性不同。由于轮廓不是元素尺寸的一部分，因此元素的width和height属性不包含轮廓的宽度。

用法：

outline-width:medium|thin|thick|length|initial|inherit;

属性值：

medium:此值将轮廓线宽度设置为默认值。轮廓线的宽度比设置为粗线的轮廓线薄，并且比设置为细线的轮廓线厚。

outline-width:medium;

<html> 
   <head> 
      <title> 
         CSS | outline-width Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "outline-width:medium; 
                  outline-style:solid;"> 
         This paragraph has medium outline. 
      </p> 
   </body> 
</html>

输出：

thin:此值将轮廓宽度设置为“细”，所获得的轮廓比“宽度”为“中等”和“厚”时指定的轮廓要细。

outline-width:thin;

<html> 
   <head> 
      <title> 
         CSS | outline-width Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "outline-width:thin;  
                  outline-style:solid;"> 
         This paragraph has thin outline. 
      </p> 
   </body> 
</html>

输出：

thick:该值将轮廓宽度设置为厚，所获得的轮廓要比以宽度和中等宽度指定的轮廓要厚。

outline-width:thick;

<!DOCTYPE html> 
<html> 
   <head> 
      <title> 
         CSS | outline-width Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "outline-width:thick;  
                  outline-style:solid;"> 
         This paragraph has thick outline. 
      </p> 
   </body> 
</html>

输出：

length:此值用于定义轮廓的厚度。

outline-width:15px;

<!DOCTYPE html> 
<html> 
   <head> 
      <title> 
         CSS | outline-width Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "outline-width:15px;  
                  outline-style:solid;"> 
         This paragraph has 15px outline. 
      </p> 
   </body> 
</html>

输出：

initial:此值将轮廓宽度设置为其默认值。

outline-width:initial;

<html> 
   <head> 
      <title> 
         CSS | outline-width Property 
      </title> 
   </head> 
     
   <body> 
      <p style = "outline-width:initial;  
                  outline-style:solid;"> 
         This paragraph has initial outline. 
      </p> 
   </body> 
</html>

输出：

inherit:此值继承父对象的outline-width属性的规范。

outline-width:inherit;

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        CSS | outline-width Property 
    </title> 
</head> 
      
<body> 
    <p style = "outline-width:medium;  
                 outline-style:solid;"> 
        This paragraph has medium outline. 
    </p> 
      
    <p style = "outline-width:thin;  
                outline-style:solid;"> 
        This paragraph has thin outline. 
    </p> 
    <br> 
      
    <p style = "outline-width:thick;  
                outline-style:solid;"> 
        This paragraph has thick outline. 
    </p> 
    <br> 
      
    <p style = "outline-width:15px;  
                outline-style:solid;"> 
        This text has an outline of 15px. 
    </p> 
    <br><br>  
    <p style = "outline-width:initial;  
                outline-style:solid;"> 
        This text has an outline of default 
        type set by initial 
    </p> 
      
</body> 
</html>

支持的浏览器：CSS |下面列出了outline-width属性：

谷歌浏览器1.0
Internet Explorer 8.0
火箱1.5
Opera 7.0
Safari 1.2

相关用法

注：本文由纯净天空筛选整理自EnaMotwani大神的英文原创作品 CSS | outline-width Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。