文本阴影是文本的一种表现效果,具体如下:
其中所涉及到的属性是:text-shadow
其晦涩的古体语法如下:
ext-shadow: none | <shadow-t>#
<shadow-t> = [ <length>{2,3} && <color>? ]
说人话就是:text-shaodw
可以为文字添加多个阴影,每个阴影包含x轴偏移(阴影离开文字的横向方向)、y轴阴影(阴影离开文字的纵向方向)、模糊半径、阴影颜色。其中模糊半径是可选参数,省略这个参数时,该参数默认为0。阴影颜色也是可选参数,省略这个参数时,其颜色为字体的默认颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style>
p{color: #333;margin: 20px}
.p1{text-shadow: 1px 2px;}
.p2{text-shadow: 1px 2px 5px red,-10px -10px 5px grey;}
</style>
</head>
<body>
<p class="p1">text-shadow</p>
<p class="p2">text-shadow</p>
</body>
</html>