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


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。