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实现立体效果的要素有三：

 

　　设置多个阴影实现纵深感，

 

　　阴影的水平和垂直偏移变化实现方向感，

 

　　阴影的颜色渐变实现错落感。





本文转载自中文网