/* 倾斜 */ p { font-style: italic; } /* 旋转 */ p { transform: rotate(30deg); } /* 渐变 */ p { background: -webkit-linear-gradient(#000000, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 阴影 */ p { text-shadow: 2px 2px #ff0000; }
以上代码分别实现了四种不同的 CSS 3 字体特效:倾斜效果、旋转效果、渐变效果和阴影效果。其中,倾斜效果使用了font-style: italic;
属性,可以使文字变成斜体;旋转效果使用了transform: rotate(30deg);
属性,可以使文字旋转指定角度;渐变效果使用了-webkit-linear-gradient()
属性,可以给文字添加渐变效果;阴影效果使用了text-shadow
属性,可以让文字产生一个阴影效果。
以上这些 CSS 3 字体特效只是冰山一角,实际上还有很多其他有趣的效果可以实现。通过灵活的运用 CSS 3 字体特效,大家可以为网页增加更多的惊喜和美感。