电话
13363039260
css怎么设置字体立体
2024-01-18 10:15 小编
css怎么设置字体立体？
css里面还是首先来全局的设置，为了避免视觉疲劳，我们修改了背景颜色和文字颜色。
body{
background-color:#666;
}
@importurl(http://fonts.googleapis.com/css?family=Dosis:500,800);
.text{
font-family:"微软雅黑","Dosis",sans-serif;
font-size:80px;
text-align:center;
font-weight:bold;
line-height:200px;
text-transform:uppercase;
position:relative;
}
然后是简单的效果的核心代码
/*简单的效果*/
.effect01{
background-color:#7ABCFF;
color:#FFD300;
text-shadow:
0px0px0#b89800,
1px-1px0#b39400,
2px-2px0#ad8f00,
3px-3px0#a88b00,
4px-4px0#a38700,
5px-5px0#9e8300,
6px-6px0#997f00,
7px-7px0#947a00,
8px-8px0#8f7600,
9px-9px0#8a7200,
10px-10px0#856e00,
11px-11px0#806a00,
12px-12px0#7a6500,
13px-13px12pxrgba(0,0,0,0.55),
13px-13px1pxrgba(0,0,0,0.5);
}
从中我们可以看出，利用text-shadow实现立体效果的要素有三：
设置多个阴影实现纵深感，
阴影的水平和垂直偏移变化实现方向感，
阴影的颜色渐变实现错落感。
猜你喜欢
联络方式：
13363039260
微信二维码 