css实现渐变色的边框
公司想要重构某某系统,新来的视觉妹子不知道哪里学来的技能,说是喜欢渐变色,视觉稿用了很多渐变的能力,普通的那种框框渐变还好说,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-clip
和background-origin
。
background-origin: border-box;
是 CSS 中用来指定背景图像的起始位置的属性之一。
这个属性有三个可能的值:
padding-box
:背景图像的起始位置从边框外边缘开始。border-box
:背景图像的起始位置从边框内边缘开始。content-box
:背景图像的起始位置从内容框的内边缘开始。
background-origin: border-box;
意味着背景图像从元素的边框内边缘开始显示,这个配置可以理解,毕竟我们的整体效果就是从border开始的。那background-clip
这个呢?
background-clip
属性用于控制背景图像的绘制区域,而且可以指定多个值,用逗号分隔。
background-clip: padding-box, border-box;
指定了两个值,分别是 padding-box
和 border-box
。
padding-box
:背景图像将被裁剪到内边距框的边界。border-box
:背景图像将被裁剪到边框框的边界。
这意味着背景图像将被裁剪到内边距框和边框框之间的区域,并且不会延伸到外边框之外。
经过这么解释,可以理解为啥渐变的边框可以出现,就是设置了一张渐变色的背景图片,然后进行裁剪,裁剪成只剩边框的图片,于是就出现了我们想要的效果。
最终,和谐的同事关系终于保留住了~
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 css实现渐变色的边框 的内容有疑问,请在下面的评论系统中留言,谢谢。