图像上的圆角

Question

http://jsfiddle.net/48Y37/

我希望在图像顶部的两个角落的圆角。从技术上讲，它是存在的，但它被图像所覆盖。我在网上到处寻找，我看到人们谈论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/

Answer 2

要舍入实际图像，必须确保<img>标记的类实际具有border-radius属性。例如：

<img class="roundrect" src="/whatever-your-source-is.png">

相应的CSS将如下所示：

.roundrect {
border-radius: 15px;
}

Answer 3

1. 使用剪裁工具复制图片并粘贴到画图中。
2. 选择圆角矩形，并将颜色更改为

。

1. 选择矩形的最大尺寸。然后，
2. 在图片周围添加了白色圆角边框。
3. ，然后copy和paste将圆角图片粘贴到需要的任何位置。