css ===== text-transform

Code directly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>text-transform</title>
    <style>
        /* 
        取值
        none	    默认。定义带有小写字母和大写字母的标准的文本。
        capitalize	文本中的每个单词以大写字母开头。
        uppercase	定义仅有大写字母。
        lowercase	定义无大写字母，仅有小写字母。
        inherit	    规定应该从父元素继承 text-transform 属性的值。
         */
         .text-transform-none{
    
    
            text-transform: none
         }
         .text-transform-capitalize{
    
    
            text-transform: capitalize
         }
         .text-transform-uppercase{
    
    
            text-transform: uppercase
         }
         .text-transform-lowercase{
    
    
            text-transform: lowercase
         }
         .text-transform-inherit{
    
    
            text-transform: inherit
         }
    </style>
</head>
<body>
    <div>默认。定义带有小写字母和大写字母的标准的文本。i am a mAn</div>

    <!-- capitalize	文本中的每个单词以大写字母开头。 只转首字母 其他字母是不是大写不关心 用户自己决定 -->
    <div class="text-transform-capitalize">i am a mAn</div>
    <div class="text-transform-uppercase">i Am a mAn</div>
    <div class="text-transform-lowercase">i Am A mAn</div>
    <div class="text-transform-lowercase">
        <div class="text-transform-inherit">i Am A mAn</div>
    </div>
</body>
</html>
effect

Insert picture description here
css ===== text-transform

Code directly

effect

Guess you like
