css模糊效果(blur)
CSS模糊效果可以使用filter属性中的blur()函数来实现。blur()函数接受一个参数，表示应用模糊的像素级别。
下面是一个简单的例子，演示了如何给一个元素应用模糊效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS模糊效果示例</title>
<style>
.blur-effect {
filter: blur(5px); /* 应用模糊效果，模糊半径为5像素 */
}
</style>
</head>
<body>
<div class="original-image">
<img src="image.jpg" alt="原图">
</div>
<div class="blur-effect-image">
<img src="image.jpg" alt="模糊效果图" class="blur-effect">
</div>
</body>
</html>在这个例子中，.original-image类中的图片是没有应用模糊效果的原图，而.blur-effect-image类中的图片则应用了模糊效果，模糊半径为5像素。你可以通过调整blur()函数中的数值来改变模糊的强度。
评论已关闭