核心知识点是: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>