使用CSS实现阴影效果

Question

使用CSS实现阴影效果

css

3

我需要按照如下附加的模型实现阴影效果。我已经将我需要实现的阴影效果用红框标出。有人告诉我要使用精灵图像来实现这个阴影效果，但我不喜欢这样做。我能用CSS3阴影效果来实现吗？

请给予建议。

- joy

2

请查看此链接：https://css-tricks.com/almanac/properties/b/box-shadow/ - Akshay

1

是的，您可以使用CSS3来完成这个任务。如果您可以展示出您的努力，我们可以为您提供更多建议。 - Manwal

学会先谷歌，总是有好处的... http://cssdeck.com/labs/different-css3-box-shadows-effects - Mr. Alien

@Akshay 这如何帮助他解决问题？仅使用简单的 box-shadow 并不容易获得那种效果。 - Mr. Alien

你可以尝试几种方法，例如使用 box-shadow、background-gradient。 - Kheema Pandey

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tanya Sinha · Accepted Answer

尝试一下这个：

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>