使用text-shadow实现文字特效

语法

text-shadow: h-shadow v-shadow blur color;

注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

    h-shadow: 必需。水平阴影的位置。允许负值。正值偏右，负值偏左。

      v-shadow:  必需。垂直阴影的位置。允许负值。正值偏下，负值偏上。

      blur:          可选。模糊的距离。

      color:         可选。阴影的颜色。如果没有指定，则使用color属性来替代。颜色值可以放在前面，实际上它们的位置是不固定的，但几个数值的顺序不能变。

举个栗子：

<style>

p {
	text-align: center;
	padding: 24px;
	margin: 0;
	font-family: helvetica,arial,sans-serif;
	color: #000;
	background: #000;
	font-size: 80px;
	font-weight: bold;
	text-shadow:  0 0 4px white,
				  0 -5px 4px #ff3,
				  2px -10px 6px #fd3,
				  -2px -15px 11px #f80,
				  2px -25px 18px #f20;
}
</style>
<p>
  text
  shadow
</p>

效果：

再举个栗子：

<style>

p {
	text-align: center;
	padding: 24px;
	margin: 0;
	font-family: helvetica,arial,sans-serif;
	color: #D1D1D1;
	background: #CCC;
	font-size: 80px;
	font-weight: bold;
	text-shadow:  -1px -1px white,
				  1px 1px #333;
}
</style>
<p>
  text
  shadow
</p>

效果：

再变换一下：

<style>

p {
	text-align: center;
	padding: 24px;
	margin: 0;
	font-family: helvetica,arial,sans-serif;
	color: #D1D1D1;
	background: #CCC;
	font-size: 80px;
	font-weight: bold;
	text-shadow:  1px 1px white,
				  -1px -1px #333;
}
</style>
<p>
  text
  shadow
</p>

效果：

转载于:https://blog.51cto.com/isymu/1663428