CSS是Web设计中不可或缺的一部分，它可以很好地控制HTML元素的样式与排版方式。而在今天，我们将要一起学习如何使用CSS来美化图片并添加滤镜效果。

/* 图片添加样式 */
img {
border: 1px solid #cccccc;
box-shadow: 1px 1px 5px #cccccc;
}
/* 滤镜样式 */
img:hover {
filter: grayscale(100%) blur(1px);
}

代码中的第一个部分是一个简单的样式，用来给图片添加一些基础的样式。其中border属性用来设置边框，而box-shadow属性则用来添加阴影效果。

接下来的部分则是实现图片滤镜效果的关键。我们使用hover伪类来实现鼠标悬停时图片的滤镜效果。其中的filter属性则是用来实现滤镜效果的核心，这里我们使用了grayscale函数和blur函数，分别实现图片的黑白化和模糊化效果。

最终的效果是当鼠标悬停在图片上时，图片会变为黑白并模糊，从而为页面增添了一些特别的视觉效果。当然，这只是滤镜效果的其中一种，我们还可以使用CSS中的其他滤镜函数，例如brightness、contrast、sepia等等，来实现更加多样化的效果。