真知棒、
侠客
侠客
  • 最后登录2020-06-29
  • 发帖数17
  • 社区居民
阅读:192回复:1

[前端]给border设置渐变色

楼主#
更多 发布于:2020-06-18 17:41
下图注册按钮的边框有渐变效果,如果让你来实现,你会怎么做呢?

图片:1033257-20181204162505023-627438633.png




首先考虑的是直接让UI给背景图片就可以了,如下图:

图片:1033257-20181121104412665-38585243.png




不过这种做法感觉不太灵活,如果要修改border的渐变颜色,就需要UI重新做图。那应该怎么做呢?
我首先想到的方法就是用CSS3的border-image属性!!


border-image有2种用法:

①:使用图片

图片:1033257-20181121105656219-2037741792.png



   

图片:1033257-20181121105722827-268940765.png




②:使用渐变
   

图片:1033257-20181121105954435-537293649.png




注:然后我选择使用上面第二种方法,渐变来实现。但遇到一个问题——border-raduis圆角属性设置无效!!



   后来经过多番查找,终于找到了解决方法,截图和demo如下
   

图片:1033257-20181204162505023-627438633.png


代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置border渐变色</title>
    <style>
        .border{    
            width: 200px;
            border: 1px solid transparent;
            text-align: center;
            padding: 10px;
            border-radius: 16px;
            color: #F6DFB4;
            position: relative;
            background: #3b3933;
        }
        .border::after{
            content: '';
            position: absolute;
            top: -4px;
            right: -4px;
            bottom: -4px;
            left: -4px;
            background: linear-gradient(#AB8124,#F0DF67,#2F1F08);
            z-index: -1;
            border-radius: 16px;
        }
    </style>
</head>
<body>
    <button class="border">注册</button>
</body>
</html>


参考:https://www.cnblogs.com/tu-0718/p/9993896.html

最新喜欢:

doubleyongdouble...
doubleyong
管理员
管理员
  • 最后登录2020-07-11
  • 发帖数834
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
沙发#
发布于:2020-06-19 09:26
666
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号