html中字体设置3d效果,CSS3实现文字3D效果

Document

权志龙

GDRAGON

css代码

h2{

font-family: Helvetica, Arial, sans-serif;/*sans-serif就是无衬线字体，是一种通用字体族*/

font-size: 7em;/*放大字体*/

text-align: center;

}

body {

background:#f9f9f9 ;/*#f9f9f9*/

}

#text1 {

font-family: helvetica;

/* text-transform: uppercase;*//*text-transform 属性控制文本的大小写 uppercase  定义仅有大写字母。

lowercase 定义无大写字母，仅有小写字母。*/

text-align: center;

color: #fefefe;

-webkit-text-shadow: #e7e7e7 3px 5px 0,

#999 4px 6px 3px,

#ccc 8px 11px 10px;

text-shadow: #e7e7e7 3px 5px 0,

#999 4px 6px 3px,

#ccc 8px 11px 10px;

}

#text2 {

background: #999;

color: transparent;

text-shadow: 0px 1px 3px rgba(250,250,250,0.95);

-webkit-background-clip: text;/* background-clip：规定背景的绘制区域*/

-moz-background-clip: text;

background-clip: text;

}

本文来源于网络：查看 >https://blog.csdn.net/Jyannic/article/details/77939359