【笔记】css英文字母大小写转换，首字母样式，文本阴影

_月半_

于 2020-07-01 10:46:17 发布

阅读量503

点赞数

文章标签： css css3 html html5

本文链接：https://blog.csdn.net/qq_46100150/article/details/107058417

版权

//html

<h1>测试首个字放大</h1>
<h2>文字阴影</h2>
<p>abcd--------------首字母大写</p>
<p>abcd--------------首字母小写</p>
<p>abcd--------------全部大写</p>
<p>abcd--------------全部小写</p>

//css

        h1:first-letter{     /*选中首字母/首个字*/
            font-size: 200%;
            color: #51e1e2;
        }
        h2{   /*设置文字阴影*/
            text-shadow: 2px 2px 5px #98b9b9;   /*文字阴影（水平，垂直，模糊距离，阴影颜色）*/
        }
        p:nth-of-type(1){     /*首字母大写（注意：此处并未手动选中首字母）*/
            text-transform: capitalize;  /*首字母大写*/
        }
        p:nth-of-type(2):first-letter{     /*选中首字母/首个字*/
            text-transform: lowercase;  /*首字母小写*/
        }
        p:nth-of-type(3){
            text-transform: uppercase;  /*全部大写*/
        }
        p:nth-of-type(4){
            text-transform: lowercase;  /*全部小写*/
        }