一、案例说明
平时颜色渐变很常见,无非就是: background: linear-gradient(to right, red, yellow);
这是线性渐变,至于径向渐变、重复渐变。从菜鸟教程上可以直接搜到。网址:https://www.runoob/css3/css3-gradients.html
那文字渐变如何实现呢?比如我想让文字从上到下是红绿渐变,代码非常简洁,只有三句话。
二、案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
/* 设置渐变色的方向以及颜色 */
background-image: linear-gradient(to bottom, red, green);
/* 背景被裁剪成文字的前景色。 */
-webkit-background-clip: text;
/* 文字默认的颜色设置为透明,这样才能让后面的渐变色凸显出来,
如果不设置,那文字颜色就是默认的黑色。 */
color: transparent;
}
</style>
</head>
<body>
<div>
盗墓笔记
</div>
</body>
</html>
每行代码的意思已经写在注释里面了。
三、总结
参考资料:
- background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。
网址:https://developer.mozilla/zh-CN/docs/Web/CSS/background-clip - transparent:透明的意思。
更多推荐
css案例14——文字渐变
发布评论