CSS3实现文字渐变

shuffle_boy

于 2020-04-08 15:25:57 发布

阅读量147

点赞数

分类专栏： css3 文章标签： html css3 css

本文章版权归shuffleboy所有，转载请注明出处

本文链接：https://blog.youkuaiyun.com/shuffle_boy/article/details/105388629

版权

css3 专栏收录该内容

7 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS3实现文字渐变</title>
  <style>
     div{
         width: 1100px;
         height: 120px;
         margin:180px auto 0;
         color: transparent; /*字体透明色*/
         font-size: 6em;
         background: linear-gradient(to right, red, blue);/*背景渐变*/
         -webkit-background-clip: text;/*背景裁剪，属性值为文字轮廓*//*请按照步骤正确执行，先渐变后裁剪*/
     }
     
  </style>
</head>
<body>
  <div>天王盖地虎 小鸡炖蘑菇</div>
</body>
</html>