CSS3的文本阴影属性用处非常多,不仅能给文本添加阴影,还可以用于产生字体特效,那么用CSS3要怎样绘制具有立体效果的字体呢?

工具/原料

  • 浏览器
  • 记事本

方法/步骤

  1. 1

    新建一个文本文档,将扩展名改为html。

  2. 2

    右击新键的文本文档,选择打开方式,记事本。以记事本格式打开。

  3. 3

    输入图片中的代码,建立一个html页面。

  4. 4

    输入<p class="p1 font2" id="effect2">立体字</p>添加主体内容。

  5. 5

    输入下面这段代码为文本添加样式。

    p{

       color:#fff907;

       padding:100px;

       margin:0;

       font:100px "隶书";

      }

  6. 6

    在花括号中输入

    text-shadow:0px 0px 0px #e2d83c,1px 1px 0px #e2d83c,2px 2px 0px #e2d83c,3px 3px 0px #e2d83c,4px 4px 0px #e2d83c,5px 5px 0px #e2d83c;

    产生立体字效果。

  7. 7

    在text-shadow最后继续输入10px 5px 30px #e4e2ba,为文本添加阴影效果。

  8. 8

    向花括号添加transform:skew(10deg,5deg);文本产生斜效果。

  9. 9

    完成。

    END
经验内容仅供参考,如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士。