最近设计师的风格发生突变, 一句话概括就是, 能用渐变的地方绝对不用纯色. 这不, 就整出了一个渐变圆角边框. 这渐变好做, 圆角好做, 渐变圆角也没问题, 可是在加个边框还是有点坑的. 没办法, 看看怎么实现吧
border-image 缺陷不支持圆角
首先想到的是 border-image 的实现方式, 用一个渐变作为 border-image:
border-image-source: linear-gradient(to right,#08fdd8,#F58549, red);
然而使用完 border-image 之后, border-radius 是无效的, 达不到圆角的效果.
你可能想到了借助 clip-path, 但是 clip-path 只能切出外边的圆角, 见下图:
background-image/background-clip
那么难道就没办法了吗? 不, 只要思想不滑坡, 办法总比困难多~, 借助上面标题中的两位, 我们可以完美实现这个效果. background-image 大家应该都不陌生, 那么 background-clip 又是个什么东东呢?
众所周知, 盒模型中的三个 box:border-box,padding-box,content-box. 当我们设置 background-image 时, 默认是设置在 border-box 上的. 但是借助 background-clip 我们可以实现将 background-image 覆盖其他盒子, 此外, 他还支持多个盒子一起设置. 这, 这真的是太棒了.
于是, 我们将 content-box 放一个白色渐变, 在 padding-box 放一个好看的渐变, 就得到如下效果:
嵌套和: after 伪类
那么, 还有别的方案吗? 最容易想到的是嵌套, 外面的元素负责渐变, 里面的元素负责纯色. 伪类的实现原理也是一样的. 这里就不详细展开了, 参看下面的 demo:
animation
有时候, 设计师还想在边框上加一些动画, 虽然我还没遇到, 但是, 有备无患嘛, 下面是收集的一些例子:
- https://codepen.io/luoyjx/pen/dWjxNP
- https://codepen.io/akinzmn/pen/OeWoga
- https://codepen.io/dominikcichon/pen/Gzwqbv
来源: https://www.cnblogs.com/imgss/p/11237170.html