Css中如何使英文和拼音变成全大写、全小写和首字母大写？

想要实现英文和中文拼音变成全大写、全小写和首个字母大写，需要用到

css中text-transform样式属性，接下来介绍一下

1、text-transform的值

1）Capitalize：英文拼音的首字母大写

2）Uppercase：英文拼音字母全大写

3）Lowercase：英文拼音字母全小写

2、text-transform语法

text-transform:+值类型，如：text-transform:Capitalize；

3、text-transform的简单使用

1）英文首字母大写

2）英文全大写

3）英文全小写

<!doctype html>

<html>

    <head>

        <meta charset="utf-8">

        <title>css中text-transform的使用</title>

    </head>

    <style type="text/css">

         .font1{

            text-transform:capitalize;  /***首字母大写**/

        }

        .font2{

            text-transform:uppercase;  /***英文全大写**/

        }

        .font3{

            text-transform:lowercase;  /***英文全小写**/

        }

    </style>

    <body>

        <span class="font1"> hello World </span><br/><br/>

         <span class="font2"> he is a sunny boy</span><br/><br/>

        <span class="font3">I AM A BLUNT MAN </span><br/>

    </body>

</html>

4、结果视图

aaarticlea/png;base64,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" alt="" width="244" height="144" />