九月资源网-不以盈利为目的,仅仅为个人学习、研究或者欣赏。若未注明来源,请联系添加。如果侵犯到您的版权,请联系删除相关文章。

如何给div盒子加上渐变?

前端那些事 Thor 2个月前 (10-17) 20次浏览 已收录 0个评论 扫描二维码

因为实在想改404的页面,看了别人的贴子,挺简单的,也是被迫学习了一下盒子渐变。

盒子渐变颜色,方式很多。

background: linear-gradient(red,yellow);

从上到下由红变黄,默认也是从上向下变化

background: linear-gradient(to top, red,yellow);

从下往上由红变黄,to top往上。

background: linear-gradient(to right, red,yellow);

从左向右变化。

background: linear-gradient(to top right, red,yellow,blue);

向右上方变化,to top right往右上。

实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 250px;
            height: 250px;
            background: -webkit-gradient(linear,40% 60%,80% 100%,from(rgb(115,202,250)),to(#fafafa));
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>
</html>

实例效果

我们可以看出他是角度变化。阅读文章后可以知道,当-webkit-gradient第二个参数的两个坐标x或y相同时,则会呈现垂直或水平的渐变效果。不想同时,则会是角度的渐变效果。也可理解为:当x轴的数值相同,则左右的状态是确定不变的,因此y轴呈现上下的垂直渐变,同理,y轴的值不变化,从而导致x轴左右水平渐变。


本文标题:如何给div盒子加上渐变?
若文件有解压密码,默认为:www.sir8.cn
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的,不得将上述内容用于商业或者非法用途。
如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。
如有侵权,请联系邮箱shidao144@gmail.com进行删除处理。
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址