12 文字阴影text-shadow_text-shadow background 在其上面了-CSDN博客

本文链接：https://blog.csdn.net/u014331138/article/details/108351675

文字阴影text-shadow

text-shadow用来为文字添加阴影，而且可以添加多层，阴影值之间用逗号隔开。（多个阴影时，第一个阴影在最上边）

默认值：none 不可继承

值
<color>
可选。可以在偏移量之前或之后指定。如果没有指定颜色，则使用UA（用户代理）选择的颜色。
<offset-x> <offset-y>
必选。这些长度值指定阴影相对文字的偏移量。
<offset-x> 指定水平偏移量，若是负值则阴影位于文字左边。
<offset-y> 指定垂直偏移量，若是负值则阴影位于文字上面。
如果两者均为0，则阴影位于文字正后方(如果设置了<blur- radius> 则会产生模糊效果)。
<blur-radius>
可选。这是 <length> 值。如果没有指定，则默认为0。
值越大，模糊半径越大，阴影也就越大越淡
语法

text-shadow: 颜色 X轴偏移量 Y轴偏移量 模糊大小;
text-shadow: black 10px 10px 10px;

多个阴影
text-shadow: 颜色 X轴偏移量 Y轴偏移量 模糊大小,颜色 X轴偏移量 Y轴偏移量 模糊大小;
text-shadow: black 10px 10px 10px,blue 20px 20px 20px;

示例：浮雕文字

	<head>
		<meta charset="UTF-8">
		<title>文字阴影</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				position: relative;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				width: 400px;
				margin: 10% auto;
				font: 50px/200px "微软雅黑";
				
				/* 设置文字颜色为白色 */
				color: #FFF;
				
				/* 设置文字阴影 */
				text-shadow: black 1px 1px 10px;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			I LOVE U
		</div>
	</body>

效果：

示例：多个阴影

/* 设置文字颜色 */
color: pink;
				
/* 设置文字阴影 */
text-shadow: yellowgreen 10px 10px 10px,orange 20px 20px 10px;

效果：