使用CSS的阴影效果

Question

我需要实现阴影效果，如下面附加的样机。我已经强调了我需要以红色框实现的阴影效果。我被告知使用精灵图像来实现这个我不喜欢的阴影效果。我可以使用CSS3阴影效果来实现这一点吗？

请指点

Answer 1

试试这个：

hr { 
 
height: 1px; 
 
margin: 50px 0; 
 
background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(0,0,0,0)), color-stop(0.5, #333333), to(rgba(0,0,0,0))); 
 
background: -webkit-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0)); 
 
background: -moz-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0)); 
 
background: -o-linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0)); 
 
background: linear-gradient(left, rgba(0,0,0,0), #333333, rgba(0,0,0,0)); 
 
border: 0; 
 
} 
 

 
hr:after { 
 
display: block; 
 
content:''; 
 
height: 30px; 
 
background: -webkit-gradient(radial, 50% 0%, 0, 50% 0%, 116, color-stop(0%, #cccccc), color-stop(100%, rgba(255, 255, 255, 0))); 
 
background: -webkit-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
background: -moz-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
background: -o-radial-gradient(center top, farthest-side, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
background: radial-gradient(farthest-side at center top, #cccccc 0%, rgba(255, 255, 255, 0) 100%); 
 
}

<hr>