美文网首页
css边框颜色渐变

css边框颜色渐变

作者: xiejiancn | 来源:发表于2021-07-26 15:42 被阅读0次

    1.直角的背景渐变

    1057389-20180911105725287-21529817.png

    <style>
    button{
    background:transparent;
    color:#23b7cb;
    font-size:15px;
    padding:5px 15px;
    border:1px transparent solid;
    border-image:linear-gradient(to right,#000718,#23b7cb) 1 10;
    }
    </style>
    <button>进入平台</button>

    注意问题:border-image的使用是不能实现圆角的效果,各位需要注意这个属性

    2.圆角的背景渐变

    1057389-20180911105313456-238421531.png

    代码如下:利用伪类元素去实现背景边的渐变效果,同时我们还可以加上动画效果,利用的是transtion:all ease 300ms即可,主要使用了linear-gradient这个属性

    <style>
    button{
    color: #23b7cb;
    font-size: 15px;
    padding: 5px 15px;
    background: #fff;
    border: 1px transparent solid;
    border-radius: 30px;
    position: relative;
    }

    button:after{
    content:'';
    position: absolute;
    top: -3px; bottom: -3px;
    left: -3px; right: -3px;
    background: linear-gradient(135deg,#000781, #23b7cb);
    border-radius: 30px;
    content: '';
    z-index: -1;
    }
    </style>

    <button>进入平台</button>

    相关文章

      网友评论

          本文标题:css边框颜色渐变

          本文链接:https://www.haomeiwen.com/subject/krkgmltx.html