渐变效果

最新推荐文章于 2021-04-22 23:25:20 发布

lavendersue

最新推荐文章于 2021-04-22 23:25:20 发布

阅读量408

点赞数

分类专栏： css 文章标签： web前端

本文链接：https://blog.csdn.net/lavendersue/article/details/76293753

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

随着时间的流逝，学习的东西正在一步步的完善。有的人说，学习是乏味枯燥的，听着听着就想低下头，眯着眼，打个瞌睡，在恍恍惚惚中结束这一天；有的人说，学习是快乐的，在知识的海洋的徜徉，那样的恣意，那样的舒畅。在补充自己的同时也感觉到了快乐和愉悦，每一天的生活都很充实，像充好了燃料的热气球，带着思绪，飞翔在高空，感受宇宙的浩瀚，在心满意足中进入梦乡。也许在梦里，依旧在和书中的某个情节，某个角色，甚至作者邂逅。
哦，忘记了，我是一个理科生，不该说这些文绉绉的东西。接下来该说正题了。今天和大家说说渐变那些事。
首先，渐变分为线性渐变和径向渐变。
（1）线性渐变，故名思议为水平或垂直的渐变的效果，语法为:backgroup:linear-gradient(150deg,skyblue 50%,pink 50%);其中，linear-gradient是线性渐变之意；150deg为角度，在webz中，deg表示度数，如果不设置度数，则默认为垂直（从上往下）渐变，若角度设置为90deg,则是水平（从左至右）渐变,若不设置角度，也可设置为to right:自左向右渐变，to left:自右向左渐变；skyblue 50%表示天蓝色占50%,pink 50%表示粉色占50%，颜色可以有多个,颜色时间要以逗号隔开。例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 1000px; height: 500px; margin: 50px auto; background: linear-gradient(120deg,skyblue 3%,pink 26%, lightblue 50%,papayawhip 90%)； } </style> </head> <body> <div></div> </body> </html>
效果图：
以上代码线性渐变效果
（2）径向渐变，从中心点向四方扩散的渐变效果，语法：backgroud:radial-gradient(300px at center center，pink,skyblue);其中，300px为粉色渐变的大小，at center center表示粉色，天蓝色皆从中心渐变，径向渐变也可以设置多种颜色。例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 500px;
                height: 500px;
                margin: 50px auto;
                border-radius: 50%;
                background:radial-gradient(300px at center center,pink,skyblue );
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>