CSS渐变的学习及使用

头像
heath_learning
    阅读 7 分钟
    1

    1、线性渐变实现：条纹背景

    image.png

    <style type="text/css">
.horizontal-stripes{
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    color: #fff;
    /* 原理：#f60占50%，从0%~50%都是纯#f60；
    渐变色从#f60(起始色) 50%处开始过度到#333(结束色) 50%处，终点也是50%，因此相当于没有过度；
    起始色与结束色还剩下50%，这剩下的50%区域按结束色平均分配 */
    background-image: linear-gradient(#f60 50%, #333 50%);
    background-size: 100% 20px;
}
    
.veritcal-stripes{
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    color: #fff;
    background-image: linear-gradient(to right, #f60 50%, #333 50%);
    background-size: 20px 100%;
}
</style>

<body>
    <div class="horizontal-stripes">横向条纹</div>
    <div class="veritcal-stripes">垂直条纹</div>
</body>

    2、线性渐变实现：收货地址底部斜边框

    image.png

    其实这个边框并不完美，将高度调高后会变成下图这样，有知道解决的高手请指点下：
    image.png

    <style>
    .box{
        position: relative;
        width: 50%;
        height: 150px;
        margin: 50px auto;
        background-color: #eee;
    }
    .box::after{
        position: absolute;
        bottom: 0;
        left: 0;
        content: ' ';
        width: 100%;
        height: 4px;
        background-image: repeating-linear-gradient(-45deg, 
                                                    #ff6c6c 0, #ff6c6c 20%, 
                                                    transparent 20%, transparent 25%, 
                                                    #1989fa 25%, #1989fa 45%, 
                                                    transparent 45%,transparent 50%);
        background-size: 140px;
    }
</style>

<body>
    <div class="box"></div>
</body>

    3、线性渐变实现：盒子切角效果

    image.png

    <style>
.box1{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /* background-color: #ccc; */
    background-image: linear-gradient(-45deg, transparent 15px, #ccc 0);
}
    
.box2{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /* 原理：定义2个背景，且均旋转45度，1个角向左，一个角向右 */
    background-image: linear-gradient(45deg, transparent 15px, #ccc 0),
                        linear-gradient(-45deg, transparent 15px, #ccc 0);
    /* 背景宽度设置为50%，高度自适应 */
    background-size: 50% 100%;
    /* 设置两个背景的位置 */
    background-position: left bottom, right bottom;
    /* 不允许背景重复 */
    background-repeat: no-repeat;
}
    
.box4{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    background-image: linear-gradient(135deg, transparent 15px, #ccc 0),
                        linear-gradient(-135deg, transparent 15px, #ccc 0),
                        linear-gradient(45deg, transparent 15px, #ccc 0),
                        linear-gradient(-45deg, transparent 15px, #ccc 0);
    background-size: 50% 50%;
    background-position: left top, right top, left bottom, right bottom;
    background-repeat: no-repeat;
}
</style>

<body>
    <div class="box1">1个切角</div>    
    <div class="box2">2个切角</div>
    <div class="box4">4个切角</div>
</body>

    4、线性渐变实现：内切三角效果

    image.png

    <style>
.inscribed-triangle{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /* 原理：定义2个渐变，2个渐变都为三角的1半，1个向左，另一个向右，
    2个渐变组合成一个三角，渐变中transparent的大小决定了三角的大小 */
    background-image: linear-gradient(-45deg, transparent 15px, #ccc 0),
                        linear-gradient(45deg, transparent 15px, #ccc 0);
    background-size: 50%;
    /* 设置2个背景的位置，第1个背景在 0 0 位置即可，第2个背景需靠右边 */
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
}
</style>

    5、线性渐变实现：底部锯齿效果

    image.png

    <style>
.Jagged{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /* 原理：定义2个渐变，2个渐变都为三角的1半，1个向左，另一个向右，
    2个渐变组合成一个小三角，设置横向背景宽度为20，再设置横向repeat即可 */
    background-image: linear-gradient(-45deg, transparent 15px, #ccc 0),
                        linear-gradient(45deg, transparent 15px, #ccc 0);
    background-size: 20px;
}
</style>

<body>
    <div class="Jagged">底部锯齿效果</div>
</body>

    6、径向渐变实现：圆形切角效果

    image.png

    <style>
.radial-box1{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    background-image: radial-gradient(circle at right bottom, transparent 15px, #ccc 0);
}

.radial-box2{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /* 原理：1个圆角向左，一个圆角向右 */
    background-image: radial-gradient(circle at left bottom, transparent 15px, #ccc 0),
                        radial-gradient(circle at right bottom, transparent 15px, #ccc 0);
    /* 背景宽度设置为50%，高度自适应 */
    background-size: 50%;
    /* 第一个背景的位置在 0 0 位置，第二个背景的的x轴需在100%处，因为背景宽度已经设置为了50%，背景位置的百分比是根据背景宽度来算的；
    如果不设置背景位置则这两个背景会重叠在一起，这样的效果就是没有圆角，且背景只有一半 */
    background-position: 0 0, 100% 0;
    /* 不允许背景重复 */
    background-repeat: no-repeat;
}

.radial-box4{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    /* 原理：定义4个圆 */
    background-image: radial-gradient(circle at left top, transparent 15px, #ccc 0),
                        radial-gradient(circle at right top, transparent 15px, #ccc 0),
                        radial-gradient(circle at left bottom, transparent 15px, #ccc 0),
                        radial-gradient(circle at right bottom, transparent 15px, #ccc 0);
    /* 背景宽度设置为50%，高度也需为50%，否则下面的两个背景会把上面的覆盖调 */
    background-size: 50% 50%;
    /* 设置4个圆的位置 */
    background-position: 0 0, 100% 0, 0 100%, 100% 100%;
    /* 不允许背景重复 */
    background-repeat: no-repeat;
}

</style>

<body>
    <div class="radial-box1">1个圆角切角</div>
    <div class="radial-box2">2个圆角切角</div>
    <div class="radial-box4">4个圆角切角</div>
</body>

    7、径向渐变实现：优惠券效果

    image.png

    <style>
.coupon{
    display: inline-block;
    width: 200px;
    height: 150px;
    line-height: 150px;
    margin: 100px 30px;
    color: #fff;
    text-align: center;
    background: radial-gradient(circle at right top, transparent 15px, #f60 0) 0 0 / 40% 50%,
                radial-gradient(circle at right bottom, transparent 15px, #f60 0) 0 100% / 40% 50%,
                radial-gradient(circle at left top, transparent 15px, #ccc 0) 100% 0 / 60% 50%,
                radial-gradient(circle at left bottom, transparent 15px, #ccc 0) 100% 100% / 60% 50%;
    background-repeat: no-repeat;
}
</style>

<body>
    <div class="coupon">优惠券效果</div>
</body>
    css3gradienthtml5
    heath_learning
    1.4k 声望31 粉丝
    « 上一篇
    工作多年积攒的常用JavaScript工具函数
    下一篇 »
    使用Generator函数实现异步任务队列

    引用和评论

    推荐阅读
    头像
    记录一次vue-cli创建vue项目失败，一直卡着不动问题

    heath_learning阅读 182

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 1.6k评论 3

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.1k评论 2

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.4k

    0 条评论
    得票最新