Java基础、中级、高级、架构面试资料
    你的位置：业余草 > HTML5 > CSS3 linear-gradient线性渐变生成加号和减号

    CSS3 linear-gradient线性渐变生成加号和减号

    HTML5 herman 3777浏览 0评论
    公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
    本博客日IP超过2000，PV 3000 左右，急需赞助商。
    极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
    受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
    所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序
    视频教程免费领
    腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

    在商城项目中，购物车是一个很重要的功能。其中最常见的是购物车中对库存的“+-”操作，包括抢购后面有很多算法。但是作为前端来说，购物车的结算中的+-就是一个计算而已。传统的实现方式是通过图片来实现+-按钮，而本文却将使用CSS3的linear-gradient线性渐变来实现购物车的加减操作。

    要实现一个减号效果非常简单，例如要实现一个10px*2px的减号图形，则CSS：

    1
    2
    3
    4
    .minus {
        background-image: linear-gradient(to top, #666, #666);
        background-size: 10px 2px;
    }

    原理如下，先使用渐变生成一个铺满整个元素背景的纯色(#666)渐变图片，然后使用background-size属性控制成我们想要的大小，效果就实现了。

    加号效果也是类似，只是要多一层linear-gradient的累加。

    最终可以实现类似下图效果：

    linear-gradient

    和传统::before, ::afetr伪元素配合background-color或border相比，使用渐变背景生成有个非常重要的好处，那就是居中定位非常方便，直接在background属性后面加个center即可，而传统实现通常需要绝对定位，然后再巴拉巴拉一通代码来居中，很啰嗦的。

    下面给出本实例的全部代码，css代码如下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    .btn {
        display: inline-block;
        background: #f0f0f0 no-repeat center;
        border: 1px solid #d0d0d0;
        width: 24px; height: 24px;   
        border-radius: 2px;
        box-shadow: 0 1px rgba(100,100,100,.1);
        color: #666;
        transition: color .2s, background-color .2s;
    }
    .btn:active {
        box-shadow: inset 0 1px rgba(100,100,100,.1);
    }
    .btn:hover {
        background-color: #e9e9e9;
        color: #333;
    }
    .btn-plus {
        background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
        background-size: 10px 2px, 2px 10px;
    }
    .btn-minus {
        background-image: linear-gradient(to top, currentColor, currentColor);
        background-size: 10px 2px;
    }

    关键的html代码如下：

    1
    2
    3
    <a href="javascript:" class="btn btn-plus" role="button" title="增加"></a>
    <input value="1" size="1">
    <a href="javascript:" class="btn btn-minus" role="button" title="减少"></a>

    最终的运行效果就是和上面的贴图一样。

    业余草公众号

    最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

    本文原文出处：业余草： » CSS3 linear-gradient线性渐变生成加号和减号

    相关文章推荐