CSS text-decoration-thickness 属性

在本文中，我们将讨论CSS中的text-decoration-thickness属性。

该属性设置宽度 的中风 装饰线下方、上方或穿过文本。此选项可以采用的不同值如下：

• auto ：文本装饰线的粗细取决于浏览器。
• font-file ：一些字体文件包含首选粗细的值，然后应用字体文件中的值，否则应用自动。
• custom values ：如果开发者想要自定义text-decoration的粗细，那么可以提供以下两种格式的值：
  • length ：覆盖自动应用的厚度，可以使用以px、rem、em、pt等为单位的值来应用厚度。
  • percent ：覆盖自动应用的粗细，可以使用当前字体的 1em 的百分比值来应用粗细。如果整个页面具有不同的字体大小，则粗细将与字体大小相同，并且与实际大小无关。
• 全局值：这些值是全局设置和经常使用的。
  • initial ：这是说重置为默认值的方式，可以是自动或字体文件，以适合者为准。
  • inherit ：此值从其下一个父项获取线宽的值。
  • unset ：这个值有两种情况，如果text-decoration-thickness有一些继承的值，它将被使用，否则将使用初始值。

语法：

text-decoration-thickness: auto | font-file | length | percentage | global values;

在以下示例中，我们有 4 个不同的段落，它们具有不同的auto、font-file、length、percent类。对于每个类，我们提供了不同的值并相应地应用样式。

示例 1 ：此示例演示了text-decoration-thickness与auto值的使用。

HTML

    
    

  

    

       GeeksforGeeks
    
    

       text-decoration-thickness:auto
    
  
    

       A computer science portal for geeks.
    
     

输出：

示例 2 ：此示例演示了 text-decoration-thickness属性的值 自动。在这种情况下，输出是相同的，因为auto设置了字体文件的值，所以它变成了default 。

HTML

  

    
    

  

    

       GeeksforGeeks
    
    

       text-decoration-thickness:font-file
    
  
    

       A computer science portal for geeks.
    
     

输出：

示例 3：此示例演示了text-decoration-thickness属性集，定义的长度为 3px。

HTML

  

    
    

  

    

       GeeksforGeeks
    
    

       text-decoration-thickness:length
    
  
    

       A computer science portal for geeks.
    
     

输出：

示例 4 ：此示例演示了text-decoration-thickness属性集，定义的百分比为12% 。

HTML

  

    
    


    

       GeeksforGeeks
    
    

       text-decoration-thickness:percentage
    
  
    

       A computer science portal for geeks.
    
     

输出：

示例 5：本示例演示了使用初始值设置的text-decoration-thickness属性。它用于将元素的 CSS 属性设置为其默认值。它与无属性相同。

HTML

  

    
    


    

       GeeksforGeeks
    
    

       text-decoration-thickness:initial
    
  
    

       A computer science portal for geeks.
    
     

输出：

示例 6 ：此示例演示了使用继承值设置的text-decoration-thickness属性。

HTML

  

    
    


    

       GeeksforGeeks
    
    

       text-decoration-thickness:inherit
    
  
    

       A computer science portal for geeks.
    
     

输出：

示例 7 ：此示例演示了使用未设置值设置的text-decoration-thickness属性。

HTML

  

    
    


    

       GeeksforGeeks
    
    

       text-decoration-thickness:unset
    
  
    

       A computer science portal for geeks.
    
     

输出：

支持的浏览器：下面列出了支持text-decoration-thickness属性的浏览器。

• 谷歌浏览器
• 微软边缘
• 火狐浏览器
• 歌剧
• 苹果浏览器