Li Ming

CSS3 实现圆角渐变边框

产品需求中,需要实现一个渐变的边框效果,如下图:

看到的第一瞬间,想到的是干脆找设计师改成纯色吧。

仔细搜索一下,使用一些 CSS3 的高级特性未尝不能实现,于是有了如下几个方案#

border-image 可以使用 CSS3 渐变

缺点:无法使用 border-radius,所以放弃

<style type="text/css">
    div {
        height: 50%; width: 50%;
        font-size: 50px;
        text-align: center;
        margin: 10px auto;
        padding: 10% 0;
        background-clip: padding-box;
    }
    .bordered {
        border: 1px double pink;
        border-image: -webkit-linear-gradient(90deg, orange, yellow) 20 stretch;
    }
    </style>
    <div class='bordered'>1</div>

点击打开范例

其他 border-image 例子

background: linear-gradient(最终的选择)

原理:外容器是纯色背景,在 :after 里构造一个渐变背景色,放在纯色背景下面,两个叠加在一块形成渐变边框效果。

实践中我们是反过来的,after 里面是纯色背景,外容器是渐变背景,因为 :after 相当于外容器最后添加的一个子节点,这样嵌套比较合理。

<style type="text/css">
    .grounded-radiants {
        position: relative;
        border: 4px solid transparent;
        border-radius: 16px;
        background: #fff;
        background-clip: padding-box;
        padding: 10px;
        box-shadow: 0 3px 9px black, inset 0 0 9px white;
    }
    .grounded-radiants::after {
        position: absolute;
        top: -4px;
        bottom: -4px;
        left: -4px;
        right: -4px;
        background: linear-gradient(red, blue);
        content: '';
        z-index: -1;
        border-radius: 16px;
    }
    </style>
    <p class="grounded-radiants">
        Some text is here.<br>
        There's even a line break!<br>
        so cool.
    </p>

点击打开范例