HTML内置css改变文字效果,CSS+HTML<文字效果>

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

Hello World

效果1:

image.png

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;

}