CSS3文字特效

最新推荐文章于 2025-03-11 13:49:49 发布

转载最新推荐文章于 2025-03-11 13:49:49 发布 · 60 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/babyisun/archive/2012/03/19/2406018.html

本文介绍如何使用 CSS 实现多种文字视觉效果，包括多重阴影、火焰字、立体字、外发光和描边字等。通过简单易懂的代码示例，读者可以轻松掌握这些技巧，并应用于网页设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们先来看一下效果吧！
闲言少叙，直接上代码

   
 

  p
 

  {
 

  text-shadow
  : 
  0.2em 
  /*水平位移，正值右*/ 
  0.2em 
  /*水平位移，正值右*/ 
  0.2em 
  /*模糊半径*/ 
  blue 
  /*阴影颜色*/
  ;
 

  }
 

  /*多重阴影*/
  .p
  1
 

  {
 

  text-shadow
  : 
  0.2em 
  0.2em 
  0.2em 
  blue
  , 
  -0.2em 
  -0.2em 
  0.2em 
  yellow, 
  0.4em 
  -0.2em 
  0.2em 
  red
  ;
 

  }
 

  /*火焰字*/
  .p
  2
 

  {
 

  background-color
  : Black;
 

  height
  : 
  30px
  ;
 

  padding
  : 
  35px
  ;
 

  text-shadow
  : 
  0 
  0 
  4px 
  white
  , 
  -0 
  -5px 
  4px 
  #ff3
  , 
  2px 
  -10px 
  6px 
  #fd3
  , 
  -2px 
  -15px 
  11px 
  #f80
  ,
  -2px 
  -25px 
  18px 
  #f20
  ;
 

  }
 

  /*立体字*/
  .p
  3
 

  {
 

  background-color
  : 
  #ccc
  ;
 

  color
  : 
  #d1d1d1
  ;
 

  height
  : 
  20px
  ;
 

  padding
  : 
  35px
  ;
 

  text-shadow
  : 
  -1px 
  -1px 
  white
  ,
  1px 
  1px 
  #333
  ;
 

  }
 

  /*外发光*/
  .p
  4
 

  {
 

  height
  : 
  20px
  ;
 

  padding
  : 
  35px
  ;
 

  text-shadow
  : 
  0 
  0 
  0.2em 
  #f87
  , 
  0 
  0 
  0.2em 
  #f87
  ;
 

  }
 

  /*描边字*/
  .p
  5
 

  {
 

  height
  : 
  20px
  ;
 

  padding
  : 
  35px
  ;
 

  color
  : White;
 

  text-shadow
  : 
  -1px 
  0 
  black
  ,
  0 
  1px 
  black
  ,
  1px 
  0 
  black
  ,
  0 
  -1px 
  black
  ;
 

  }
 
DEMO演示
注释写的还算比较清楚，直接赋值可用。
另外提醒大家，如果配合一些伪类来书写这些效果，可能会更好。如:hover的时候加上这些，是不是很炫丽呢？
欢迎访问我的原文博客：http://qdgcs.co.cc/ ，这个博客近期将持续更新HTML5+CSS3+Js相关内容

转载于:https://www.cnblogs.com/babyisun/archive/2012/03/19/2406018.html