详解：30 text-shadow的开端

贵哥的编程之路

发布于 2020-10-28 12:08:24

2410

发布于 2020-10-28 12:08:24

核心知识点是：text-shadow：x y 模糊的大小模糊的颜色，请大家记住一点：xy可以负数形式出现嘿嘿。核心是复制哈

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>text-shadow</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	<style type="text/css">
		div{
			margin:50px;
			border:1px solid red;
			height:100px;
		}
		.box1{
			text-shadow: 5px 5px 0 #000;
			/*意思是记住最核心的地方在于它是复制阴影的哈，往右5px 往下5px*/
		}
		.box2{
			text-shadow: 5px 5px 5px red;
			/*，往右5px 往下5px， 模糊的大小为5px，颜色为red*/
		}
		.box3{
			text-shadow: 5px 5px 5px #f00,10px 10px 5px gray;
			/*意思是先5px 5px 5px #f00，然后连续的10px 10px 5px gray*/
		}
	</style>
</head>
<body>
<div class="box1">this is a test ! Hello World</div>
<div class="box2">this is a test ! Hello World</div>
<div class="box3">this is a test ! Hello World</div>

</body>
</html>