css实现渐变色的边框

发表于 2024-04-03
更新于 2024-05-23
分类于 技术专栏
阅读量 144
字数统计 2007

公司想要重构某某系统,新来的视觉妹子不知道哪里学来的技能,说是喜欢渐变色,视觉稿用了很多渐变的能力,普通的那种框框渐变还好说,linear-gradient或者radial-gradient都可以完成,可是她说,外框也得渐变,渐变的外框多好看,像下面这样子的:

PS:视觉妹子不仅外框要渐变,svg图标也想渐变~~

为了维护良好的同事关系,我果断接下了这个任务。边框想要渐变,那用单纯的boder属性肯定是不行的了,看了下蓝湖的推荐写法是:

1width: 466px; 2height: 48px; 3background: #494C69; 4border-radius: 8px 8px 8px 8px; 5border: 2px solid; 6border-image: radial-gradient(circle, rgba(86, 183, 253, 1), rgba(171, 231, 210, 1)) 2 2;

好好,看看这次蓝湖靠不靠谱,代码里一设置,成这样子了:

边框渐变是出来了,但是我的border-radius貌似没了。

看来没满足需求,再找找别的方案。

最后在这篇文章上找到了答案:CSS实现渐变色边框(Gradient borders)的5种方法

果然社区的力量是巨大的,最后我们采用了第五种方法,最简单,也不需要阴影额外元素:

1{ 2 background-image: linear-gradient(#494c69, #494c69), linear-gradient(#57bcf7, #abe7d2); 3 background-clip: padding-box, border-box; 4 background-origin: border-box; 5 border: 1px solid transparent; 6}

PS:最后这种写法其实还有一个问题是,如果中间内容的背景色是透明的话,整体效果就实现不出来的,就像下面这样:

那为什么这个写法就可以得到渐变色的外框呢?

background-image属性就不多说了吧,给元素放上一张背景图片,应用两个渐变叠加,第一个渐变其实不算渐变,颜色设置一样,相当于做了个背景色,所以background-image的配置等价于下面这个:

1background-color: #494c69 2background-image: linear-gradient(#57bcf7, #abe7d2);

那关键的另外两个属性:background-clipbackground-origin

background-origin: border-box; 是 CSS 中用来指定背景图像的起始位置的属性之一。

这个属性有三个可能的值:

  1. padding-box:背景图像的起始位置从边框外边缘开始。
  2. border-box:背景图像的起始位置从边框内边缘开始。
  3. content-box:背景图像的起始位置从内容框的内边缘开始。

background-origin: border-box; 意味着背景图像从元素的边框内边缘开始显示,这个配置可以理解,毕竟我们的整体效果就是从border开始的。那background-clip这个呢?

background-clip 属性用于控制背景图像的绘制区域,而且可以指定多个值,用逗号分隔。

background-clip: padding-box, border-box; 指定了两个值,分别是 padding-boxborder-box

  • padding-box:背景图像将被裁剪到内边距框的边界。
  • border-box:背景图像将被裁剪到边框框的边界。

这意味着背景图像将被裁剪到内边距框和边框框之间的区域,并且不会延伸到外边框之外。

经过这么解释,可以理解为啥渐变的边框可以出现,就是设置了一张渐变色的背景图片,然后进行裁剪,裁剪成只剩边框的图片,于是就出现了我们想要的效果。

最终,和谐的同事关系终于保留住了~

公众号关注一波~

微信公众号

关于评论和留言

如果对本文 css实现渐变色的边框 的内容有疑问,请在下面的评论系统中留言,谢谢。

网站源码:linxiaowu66 · 豆米的博客

Follow:linxiaowu66 · Github