CSS3背景颜色渐变

最新推荐文章于 2024-06-20 11:21:40 发布

weixin_50027754

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量135

点赞数 1

分类专栏：教程笔记 css 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_50027754/article/details/109660827

版权

教程同时被 3 个专栏收录

111 篇文章 0 订阅

订阅专栏

笔记

110 篇文章 0 订阅

订阅专栏

css

14 篇文章 0 订阅

订阅专栏

说明：CSS3实现背景颜色渐变

1.代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>

     .content { width:600px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold;
     background-image:-webkit-linear-gradient(left, red 20%, blue 30%, yellow 60%, green 90%); 
       }

   
    </style>
</head>

<body>
    <div class="content">点亮了一整个夏夜星空也为你斑斓</div>
</body>
</html>

2.页面效果
在这里插入图片描述
3.属性说明
** background-image:-webkit-linear-gradient(left, red 20%, blue 30%, yellow 60%, green 90%);是用来设置背景颜色渐变的left指定颜色渐变的方向至左往右也可以设置对角：to bottom right背景颜色的方向对角 red20%红色占整个渐变色域的百分子二十**

weixin_50027754

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3背景颜色渐变

说明：CSS3实现背景颜色渐变1.代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <style> .content { width:600px; height:100px; line-height:100px; text-align:center; font-size:32px; font-weight:bold; background-ima
复制链接

扫一扫

专栏目录