当前位置: 首页>>编程示例 >>用法及示例精选 >>正文

CSS outline-style用法及代码示例

CSS 中的 outline-style 属性用于设置元素轮廓的外观。元素的轮廓和边框相似，但又不相同。轮廓不占用空间，并且绘制在元素的边界之外。此外，默认情况下，轮廓围绕元素的所有四个边绘制，无法更改。

用法:

outline-style:auto|none|dotted|dashed|solid|double|groove|ridge|
inset|outset|initial|inherit;

属性值：

  • auto:它通过浏览器设置元素的轮廓。

    用法:

    outline-style:auto;

    例：



    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                  
                /* CSS Property for outline-style */ 
                outline-style:auto;
            }
        </style>
      
    </head>
      
    <body>
        <!-- outline-style:auto;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-auto

  • none:这是默认值，它将轮廓宽度设置为零。因此，它是不可见的。

    用法:

    outline-style:none;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                  
                /* CSS Property for outline-style */ 
                outline-style:none;
            }
        </style>
      
    </head>
      
    <body>
          
        <!-- outline-style:none;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-none

  • dotted:它用于将元素周围的一系列点设置为轮廓。

    用法:

    outline-style:dotted;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                  
                /* CSS Property for outline-style */ 
                outline-style:dotted;
            }
        </style>
      
    </head>
      
    <body>
          
        <!-- outline-style:dotted;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-dotted

  • dashed:它用于将元素周围的一系列虚线段设置为轮廓。

    用法:

    outline-style:dashed;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                  
                /* CSS Property for outline-style */ 
                outline-style:dashed;
            }
        </style>
      
    </head>
      
    <body>
          
        <!-- outline-style:dashed;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-dashed

  • solid:它用于将元素周围的实线段设置为轮廓。

    用法:

    outline-style:solid;

    例：



    
<!DOCTYPE html>
<html>
  <head>
    <title>CSS outline-style property</title>
  
    <!-- Internal CSS Style Sheet -->
    <style>
      h1{
        color:green;
        text-align:center;
          
        /* CSS Property for outline-style */ 
        outline-style:solid;
      }
    </style>
  
  </head>
  
  <body>
      <!-- outline-style:solid;-->
      <h1>GeeksForGeeks</h1>
  </body>
  
</html>

    输出：
    CSS Property | outline-style-solid

  • double:它将元素周围的双线段设置为轮廓。轮廓的宽度等于各个线段的宽度和它们之间的间距之和。

    用法:

    outline-style:double;

    例：

    
<!DOCTYPE html>
<html>
  <head>
    <title>CSS outline-style property</title>
  
    <!-- Internal CSS Style Sheet -->
    <style>
      h1{
        color:green;
        text-align:center;
          
        /* CSS Property for outline-style */ 
        outline-style:double;
      }
    </style>
  
  </head>
  
  <body>
      <!-- outline-style:double;-->
      <h1>GeeksForGeeks</h1>
  </body>
  
</html>

    输出：
    CSS Property | outline-style-double

  • groove:它将元素周围的凹槽线段设置为轮廓，这使得它感觉它是雕刻的。

    用法:

    outline-style:groove;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                outline-width:8px;
                  
                /* CSS Property for outline-style */ 
                outline-style:groove;
            }
        </style>
      
    </head>
      
    <body>
          
        <!-- outline-style:groove;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-groove

  • ridge:它将元素周围的脊线段设置为轮廓，这让人感觉它正在挤压。它与凹槽相反。

    用法:

    outline-style:ridge;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                outline-width:8px;
                  
                /* CSS Property for outline-style */ 
                outline-style:ridge;
            }
        </style>
    </head>
      
    <body>
          
        <!-- outline-style:ridge;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-ridge

  • inset:它将元素周围嵌入的线段设置为轮廓，这让我们感觉它是固定在显示中的。

    用法:

    outline-style:inset;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                outline-width:8px;
                  
                /* CSS Property for outline-style */ 
                outline-style:inset;
            }
        </style>
    </head>
      
    <body>
          
        <!-- outline-style:inset;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-inset

  • outset:它围绕看起来要出来的元素设置线段，作为轮廓。它与插图相反。

    用法:

    outline-style:outset;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                outline-width:8px;
                  
                /* CSS Property for outline-style */ 
                outline-style:outset;
            }
        </style>
    </head>
      
    <body>
          
        <!-- outline-style:outset;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-outset

  • initial:它用于将 outline-style 属性设置为其默认值。它将轮廓的宽度设置为零。因此，轮廓不可见。

    用法:

    outline-style:initial;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            h1 {
                color:green;
                text-align:center;
                outline-width:5px;
                outline-color:black;
          
                /* CSS Property for outline-style */
                outline-style:initial;
            }
        </style>
    </head>
      
    <body>
          
        <!-- outline-style:initial;-->
        <h1>GeeksForGeeks</h1>
    </body>
  
</html>                    

    输出：
    CSS Property | outline-style-initial

  • inherit:它使 outline-style 属性从其父元素继承。

    用法:

    outline-style:inherit;

    例：

    
<!DOCTYPE html>
<html>
    <head>
        <title>
            CSS outline-style property
        </title>
      
        <!-- Internal CSS Style Sheet -->
        <style>
            * {
                padding:1px;
            }
            body {
                outline-style:dashed;
            }
            h1 {
                color:green;
                text-align:center;
                outline-width:5px;
                outline-color:black;
          
                /* CSS Property for outline-style */
                outline-style:inherit;
            }
        </style>
    </head>
      
    <body>
          
        <!-- outline-style:inherit;-->
        <h1>GeeksForGeeks</h1>
    </body>
</html>                    

    输出：
    CSS Property | outline-style-inherit

支持的浏览器： outline-style 属性支持的浏览器如下：

  • 谷歌浏览器 1.o
  • 互联网浏览器 8
  • Firefox 1.5
  • Opera 7.0
  • 野生动物园 1.2



相关用法


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