css blur 周边

CSS模糊效果被广泛应用于网页设计中，许多网站都使用模糊效果来吸引用户的注意力。在CSS中，模糊效果可以通过使用Blur函数或Box-shadow属性来实现。

.blur {
  filter: blur(5px);
}

.shadow {
  Box-shadow: 0 0 5px rgba(0,0.5);
}

Blur函数可以应用于任何元素，包括文本、背景图像、边框和阴影等。而Box-shadow属性只能应用于元素的阴影。

除了简单的应用，还可以通过hover效果或JavaScript动画使CSS模糊效果更加生动。例如，可以通过hover效果来实现鼠标悬停时出现模糊效果，或者使用JavaScript动画来实现随着页面滚动而逐渐变得模糊。

.blur:hover {
  filter: blur(10px);
}

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  $('.blur').css('filter','blur(' + scrollTop / 100 + 'px)');
});

值得注意的是，CSS模糊效果可能会降低页面性能并增加网站的加载时间。因此，在使用模糊效果时，应该谨慎考虑其使用场景和使用频率。