[分享]css3文字+阴影效果

CSS3中的文字和阴影效果是许多网页设计师喜欢用的一种效果，可以让网页看起来更加美观，增加阅读体验。下面我们来介绍一些常用的CSS3文字和阴影效果。/ 实现文字阴影 / .shadow { texts...

CSS3中的文字和阴影效果是许多网页设计师喜欢用的一种效果，可以让网页看起来更加美观，增加阅读体验。下面我们来介绍一些常用的CSS3文字和阴影效果。

/* 实现文字阴影 */
.shadow {
  text-shadow: 2px 2px 5px #888888;
}

/* 实现字体渐变 */
.gradient {
  background: -webkit-linear-gradient(top, #1e5799, #7db9e8); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(top, #1e5799, #7db9e8); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(top, #1e5799, #7db9e8); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom, #1e5799, #7db9e8); /* 标准语法 */
}

/* 实现镂空文字 */
.hollow {
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 4px #000, 0 0 6px #000, 0 0 8px #000;
  -webkit-text-fill-color: transparent;
}

/* 实现光晕文字 */
.halo {
  text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff;
} 

以上是一些常用的CSS3文字和阴影效果，你可以根据自己的需要选择使用。但是需要注意的是，过多的文字和阴影效果可能会影响网页的加载速度，所以要适度使用。