详解:30 text-shadow的开端

2020-10-28 12:08:24 浏览数 (1)

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

代码语言:javascript复制
<!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>

0 人点赞