CSS3中提供了多种方式来实现有颜色的倾斜字体效果,下面分别介绍。
1. 使用transform属性
p{
transform: skew(-20deg);
color: #00bcd4;
} transform属性中的skew参数可以让字体倾斜,而color属性可以设置字体颜色。
2. 使用linear-gradient函数
p{
background: linear-gradient(to right bottom, #00bcd4, #ffeb3b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
} linear-gradient函数可以创建渐变背景色,-webkit-background-clip: text和-webkit-text-fill-color: transparent的组合可以让字体颜色跟随背景色变化。
3. 使用text-shadow属性
p{
text-shadow: -2px 2px #00bcd4;
color: #fff;
} text-shadow属性可以创建阴影效果,借助颜色和位置的设置可以实现倾斜的效果。