text-shadow属性定义文本阴影。
/* 文本阴影 text-shadow*/
text-shadow: length(x) length(y) length(模糊半径) color(模糊颜色);
/*
x,y轴偏移可以为正,可以为负,模糊半径可选,3个length的顺序不能变,color可在前可在后.
效果是可以叠加的。
*/
text-shadow:1px 1px 1px red,2px 2px 2px blue;
利用多个文本阴影设置项的堆叠效果可以设计复杂的文本特效。
请看下面这些例子,第二个做了着火的效果(做的太粗,有兴趣的可以做的再细致些),第三个为凸出效果,第四个为凹陷效果,第五个模糊边框,有点荧光的意思。
<style>
p.one{
font-size:40px;
text-shadow: 4px 4px 4px #600,
8px -6px 4px #060,
-6px 8px 4px #006;
}
p.two{
color:#000;
/* background: #000; */
font-size:40px;
font-weight:bold;
text-shadow:0 -3px 2px #ff3,
1px -5px 3px #fd3,
-1px -6px 5px #f80,
1px -9px 9px #f20;
}
p.three{
font-size: 40px;
font-weight:bold;
/* background: pink; */
color:#D1D1D1;
text-shadow:-1px -1px white,
1px 1px #000;
}
p.four{
font-size:40px;
font-weight:bold;
/* background: pink; */
color:#D1D1D1;
text-shadow:1px 1px white,
-1px -1px #000;
}
p.five{
font-size: 40px;
font-weight:bold;
color:#000;
text-shadow:0 0 8px #f80,
0 0 12px #f80;
}
</style>
</head>
<body>
<p class="one">TEXT</p>
<p class="two">TEXT</p>
<p class="three">TEXT</p>
<p class="four">TEXT</p>
<p class="five">TEXT</p>
</body>
textShadow.png
网友评论