html - 图像上的圆 Angular

Question

http://jsfiddle.net/48Y37/

我想要图像顶部两个 Angular 的圆 Angular 。它在技术上是存在的，但被图像覆盖了。我浏览了整个网络，看到人们谈论 overflow: hidden; 甚至 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;
}

Answer 1

您需要为该图像添加一个border-radius:http://jsfiddle.net/WouterJ/48Y37/1/