高亮的博客

# 渐变

# 背景线性渐变

线性渐变

语法：

background: linearGradient(起始方向,颜色1,颜色2,...)
background: -webkit-linear-gradient(left,red,blue)

背景渐变必须添加浏览器私有前缀
起始方向可以是：方位名词或者度数，如果省略默认就是top

<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
<style>
    .div2,.div1 {
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
    }
    .div1 {
        background: -webkit-linear-gradient(left, red, blue);
    }
    .div2 {
        background: -webkit-linear-gradient(bottom left, red, blue);
    }
</style>

← SVG图标 →