文字渐变
background-image:-webkit-linear-gradient(top,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-size: 36px;
背景渐变
height: 200px;
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
所有代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#grad1 {
height: 200px;
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
}
p {
background-image:-webkit-linear-gradient(top,red,#fd8403,yellow);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-size: 36px;
}
</style>
</head>
<body>
<div id="grad1"></div>
<p>文字渐变色</p>
</body>
</html>
网友评论