[分享]css3图片外发光效果

CSS3 提供了许多好看的样式效果，它的一个常用特效就是图片的外发光效果。如何添加外发光效果呢？简单来说，只需要为图片添加 boxshadow 属性，如下所示：img { boxshadow: 0 0...

CSS3 提供了许多好看的样式效果，它的一个常用特效就是图片的外发光效果。

如何添加外发光效果呢？简单来说，只需要为图片添加 box-shadow 属性，如下所示：

img {
  box-shadow: 0 0 20px #fff;
} 

上述代码表示为图片添加一个白色阴影，阴影大小为 20px。如需调整阴影的方向或颜色，只需要更改参数即可。

此外，我们也可以为图片添加渐变色的外发光效果，代码如下：

img {
  box-shadow: 0 0 20px #fff, 
              0 0 40px #fff, 
              0 0 60px #fff, 
              0 0 80px rgba(255,255,255,0.5);
} 

上述代码中，分别添加了四个阴影层，最后一个阴影层为渐变色，颜色透明度为 0.5。

通过 CSS3 的 box-shadow 属性为图片添加外发光效果，能够为网站带来更加出色的视觉效果。