[前端]给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

代码如下：

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;设置border渐变色&lt;/title&gt;
    &lt;style&gt;
        .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;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;button class="border"&gt;注册&lt;/button&gt;
&lt;/body&gt;
&lt;/html&gt;

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

喜欢1

[前端]给border设置渐变色

最新喜欢：