html – 图像上的圆角

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/

原文地址：https://www.jb51.cc/html/230331.html