当前位置：首页 > news >正文

❤css实用

news 2025/7/13 4:32:50

❤ css实用

渐变色边框（Gradient borders方法的汇总 5种）

给 border 设置渐变色是很常见的效果，实现这个效果有很多思路

1、使用 border-image

使用 css 的 border-image 属性给 border 绘制复杂图样
与 background-image 类似，我们可以在 border 中展示image和linear-gradient。
通过 border-image 设置渐变色 border 是最简单的方法，只需要两行代码：

div {border: 4px solid;border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}/* 或者 */
div {border: 4px solid;border-image-source: linear-gradient(to right, #8f41e9, #578aef);border-image-slice: 1;
}

效果：
在这里插入图片描述

缺陷：不支持设置 border-radius

2、使用 background-image

使用 background-image 绘制渐变色背景，并且把中间用纯色遮住应该是最容易想到的一种方法。

思路：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。

背景虚化backdrop-filter

主要使用CSS的backdrop-filter属性，backdrop-filter属性可以对元素的背景进行模糊处理。

1、将要应用背景虚化效果的元素的position属性设置为relative或absolute，以便能够使用z-index属性。
2、使用::before或::after伪元素来创建一个与元素相同大小的伪元素，并将其position属性设置为absolute，top、left属性设置为0，z-index属性设置为-1，以确保伪元素在元素的下方
3、接下来，为伪元素设置背景图片，并使用backdrop-filter属性将背景进行虚化。可以使用blur()函数来设置模糊程度，也可以使用其他滤镜函数组合来实现更多效果。
4、使用content属性将伪元素的内容设置为空字符串。

效果：
在这里插入图片描述
代码部分
代码地址

<style>.element {position: relative;width: 300px;height: 200px;overflow: hidden;padding: 20px;box-sizing: border-box;}.element::before {content: "";position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background-image: url('https://img0.baidu.com/it/u=3855103837,344140545&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400');backdrop-filter: blur(5px);/* 虚化程度 */}.element::after {content: "";position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;background-color: rgba(255, 255, 255, 0.5);/* 虚化后的背景颜色 */backdrop-filter: blur(5px);/* 虚化程度 */}</style><div><div class="element"><div class="centerbox" style="width:100%;height: 100%;"><img src="https://img0.baidu.com/it/u=3855103837,344140545&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400" alt="" style="width:100%;height: 100%;"></div></div></div>