1.盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影</title>
<style>
#div1{margin:100px;width:200px;height:200px;background:#ccc;
/*x轴偏移 y轴偏移 blur模糊度 拓展半径 color*/
box-shadow: 10px 20px 10px 100px red;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>2.盒子内阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影多个</title>
<style>
#div1{margin:100px;width:200px;height:200px;background:#ccc;
border:10px dashed #000;
box-shadow:
inset 10px 0 red,
inset 0 10px green,
inset -10px 0 yellow,
inset 0 -10px blue,
20px 0 yellow,
0 20px blue,
-20px 0 green,
0 -20px pink;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>3.盒子阴影多个_1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影多个</title>
<style>
#div1{margin:100px;width:200px;height:200px;background:#ccc;
box-shadow:
10px 0 red,
0 10px green,
-10px 0 yellow,
0 -10px blue,
20px 0 yellow,
0 20px blue,
-20px 0 green,
0 -20px pink;
border-radius:50%;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>4.盒子阴影多个_2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子阴影多个</title>
<style>
#div1{margin:100px;width:200px;height:200px;background:#ccc;
box-shadow:
10px 0 red,
0 10px green,
-10px 0 yellow,
0 -10px blue,
20px 0 yellow,
0 20px blue,
-20px 0 green,
0 -20px pink;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>5.文字阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{border:1px solid red;font-size: 30px;
/*x轴偏移 y轴偏移 blur模糊度 颜色*/
text-shadow: 1px 2px 2px 100px red;
}
</style>
</head>
<body>
<span>徐玉朋</span>
</body>
</html>6.文字阴影多个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
span{position:absolute;left:300px;top:300px;border:1px solid red;
font-size: 30px;
text-shadow:
200px 0 red,
0 200px pink,
-200px 0 yellow,
0 -200px green;
}
</style>
</head>
<body>
<span>徐玉朋</span>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
