css实现文字渐变色
效果：
image.png
css代码（从左到右）：
background: linear-gradient(to right, #e51728, #ff7859);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
linear-gradient语法：
background-image: linear-gradient(direction(方向), color-stop1, color-stop2, ...);
从左上角到右下角的线性渐变：
background-image: linear-gradient(to bottom right, red , yellow);
image.png
线性渐变指定一个角度：
background-image: linear-gradient(180deg, red, yellow);
image.png
多个终止色:
background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
image.png
透明度：
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
image.png
文字加横线 text-decoration属性
text-decoration语法
/关键值/
text-decoration: none; /没有文本装饰/
text-decoration: underline red; /红色下划线/
text-decoration: underline wavy red; /红色波浪形下划线/
/全局值/
text-decoration: inherit;
text-decoration: initial;
text-decoration: unset;
描述
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text-decoration</title>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>
</html>
效果展示
image.png
