CSS3多重阴影效果实现问题详解

123 阅读1分钟

为什么没有任何的效果?

[HTML]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<style type="text/css">
#box{
background: #fff;
}
#box-shadow {
width: 100px;
height: 100px;
margin:0 auto;
-o-box-shadow: inset 0 0 30px hsl(60,0%,0%),inset 0 0 50px hsl(60,97%,53%,1);
-webkit-box-shadow: inset 0 0 30px hsl(60,0%,0%), inset 0 0 50px hsl(60,97%,53%,1);
-moz-box-shadow: inset 0 0 30px hsl(60,0%,0%), inset 0 0 50px hsl(60,97%,53%,1);
box-shadow: inset 0 0 30px hsl(60,0%,0%), inset 0 0 50px hsl(60,97%,53%,1);
}
</style>
</head>
<body>
<div id="box">
<div id="box-shadow">
多重阴影
</div>
</div>