CSS+HTML<文字效果>

下面归类一些简单的文字效果，此处都为静态样式，想要动态的，可以根据自身需求添加 hover 效果。

<h1>Hello World</h1>

效果1:

image.png

知识点： -webkit-box-reflect

h1 {
            -webkit-box-reflect: below -0.25em linear-gradient(transparent 0%, rgba(255, 255, 255, .6) 100%);
   }

效果2:

image.png

        h1 {
            /* 文字描边 width color */
            -webkit-text-stroke: 0.05rem black;
            color: transparent;
            text-shadow: -5px 0 rgba(0, 255, 255, 0.4), 5px 0 rgba(255, 0, 255, 0.4);
        }

效果3:

image.png
知识点：text-decoration 属性

        h1 {
            text-decoration: line-through;
        }

效果4:

image.png

        h1 {
            color: #f4f4f4;
            text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757;
        }

效果5:

image.png

        h1 {
            color: transparent;
            background-image: linear-gradient( transparent 0%,transparent 50%,#447df7 50%, #447df7 100%);
            -webkit-background-clip: text;
            -webkit-text-stroke: 0.05rem #447df7;
        }

效果6:

image.png

        h1 {
            color: transparent;
            text-shadow: 0 0 5px black;
        }

效果7:

image.png

        h1 {
            /* 文字间距 */
            letter-spacing: .3rem;
            text-shadow: 1px 1px 0px white,3px 3px 0px black;
        }