CSS |大纲样式属性

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

句法：

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

属性值：

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

  句法：

  outline-style: auto;

  例子：

  
  
      
          
        
          
          
        
      
        
      
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

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

  句法：

  outline-style: none;

  例子：

  
  
      
          
        
          
          
        
      
        
      
            
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

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

  句法：

  outline-style: dotted;

  例子：

  
  
      
          
        
          
          
        
      
        
      
            
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

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

  句法：

  outline-style: dashed;

  例子：

  
  
      
          
        
          
          
        
      
        
      
            
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

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

  句法：

  outline-style: solid;

  例子：

  
  
    
      
    
      
      
    
    
    
    
        
        
  GeeksForGeeks
    
    
  
  

  输出：
  

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

  句法：

  outline-style: double;

  例子：

  
  
    
      
    
      
      
    
    
    
    
        
        
  GeeksForGeeks
    
    
  
  

  输出：
  

• 凹槽：在元素周围设置凹槽线段作为轮廓，给人一种雕刻的感觉。

  句法：

  outline-style: groove;

  例子：

  
  
      
          
        
          
          
        
      
        
      
            
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

• 脊线：将元素周围的脊线段设置为轮廓，给人一种挤压的感觉。它与凹槽相反。

  句法：

  outline-style: ridge;

  例子：

  
  
      
          
        
          
          
      
        
      
            
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

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

  句法：

  outline-style: inset;

  例子：

  
  
      
          
        
          
          
      
        
      
            
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

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

  句法：

  outline-style: outset;

  例子：

  
  
      
          
        
          
          
      
        
      
            
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

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

  句法：

  outline-style: initial;

  例子：

  
  
      
          
        
          
          
      
        
      
            
          
          
  GeeksForGeeks
      
    
                      
  

  输出：
  

• 继承：它使大纲样式属性从其父元素继承。

  句法：

  outline-style: inherit;

  例子：

  
  
      
          
        
          
          
      
        
      
            
          
          
  GeeksForGeeks
      
                      
  

  输出：
  

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

• 谷歌浏览器 1.o
• 浏览器 8
• 火狐 1.5
• 歌剧7.0
• Safari 1.2