CSS样式文本的虚化效果怎么做?

html-css018

CSS样式文本的虚化效果怎么做?,第1张

文本虚拟化效果可以通过css的text-shadow来实现。

text-shadow语法:

text-shadow ： none | <length>none | [<shadow>, ] * <shadow>或none | <color>[, <color>]*

也就是：

text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...

或者

text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)].

例子：

.demo {background: #666666width: 440pxpadding: 30pxfont: bold 55px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sanscolor: #ffftext-transform: uppercase}

1、实践代码：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=gb2312">

<title>CSS实现表格阴影</title>

</head>

<body>

<table width=300 height=215 align=left bordercolor="#FF9966" bgcolor=#f3f3f3

style="filter:progid:DXImageTransform.Microsoft.Shadow

(Color=#666666,Direction=120,strength=5)">

<tr>

<td width="230" bgcolor="#FF9966" align="center">

这是一个表格阴影特效，用CSS实现的。</a>

</td>

</tr>

</table>

</body>

</html>

2、用纯CSS代码实现的表格阴影代码，这里仍然是用到了filter属性，至于阴影阴影透明义或偏移角度可以自选调整，仅提供一种思路。