http://jsfiddle.net/48Y37/
我想要在图像顶部的两个角落的圆角.它在技术上是在那里,但被图像覆盖.我已经看了整个网络,我看到人们谈论溢出:隐藏;甚至是JavaScript(我尽可能避免),但是我从来没有将它实现到我现有的代码片段上.
提前致谢.
<section class="container"> <header> <img src="http://i.imgur.com/CpL8u.png" style="Box-shadow: 0px 0px 10px #888;" /> </header> <section class="body"> Lorem ipsum blahblah I don't know the rest. </section> </section>
CSS:
header { width: 640px; margin-left: -10px; margin-top: -10px; } section.container { background: #fff; width: 620px; margin: auto; -moz-border-radius: 10px; border-radius: 10px; padding: 10px; Box-shadow: 0px 0px 20px #888; } section.body { margin-top:10px; }
解决方法
您需要为该图像添加border-radius:
http://jsfiddle.net/WouterJ/48Y37/1/