多语言展示
当前在线:1305今日阅读:183今日分享:19

用CSS3怎样制作立体字效果

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

浏览器

2

记事本

方法/步骤
1

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

2

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

3

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

4

输入

立体字

添加主体内容。

5

输入下面这段代码为文本添加样式。p{   color:#fff907;   padding:100px;   margin:0;   font:100px '隶书';  }

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

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

8

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

9

完成。

推荐信息