css 圆形滤镜 |bootcss login

/* CSS圆形滤镜 */
.circle {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
filter: blur(5px); /* 模糊滤镜 */
}

首先，大家要将元素的border-radius设置为50%，这样就可以将矩形变成圆形。然后，大家可以通过添加filter属性来创建滤镜效果。在上述代码中，大家使用了模糊滤镜，并将其值设置为5像素。

除了模糊滤镜之外，大家还可以使用其它滤镜效果，如下：

/* 剪影滤镜 */
.shadow {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
}
/* 反色滤镜 */
.invert {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
filter: invert(1);
}
/* 灰度滤镜 */
.grayscale {
width: 100px;
height: 100px;
background-color: #f1c40f;
border-radius: 50%;
filter: grayscale(1);
}

在上述代码中，大家使用了三种不同的滤镜效果：

• 剪影滤镜可以帮助大家创建出生动的阴影效果。
• 反色滤镜可以让元素的颜色变得相反，这种效果可以用来制作炫酷的按钮效果。
• 灰度滤镜可以将元素变成黑白色，这种效果可以用来制作简洁的图标。

总的来说，CSS圆形滤镜是一种非常实用和有用的工具，通过适当的滤镜效果，大家可以让网页设计更加生动和有趣。希望您通过这篇文章，可以学习到如何创建并使用CSS圆形滤镜。