图像上的圆角

时间:2012-07-21 21:11:59

标签: html css

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;
}

3 个答案:

答案 0 :(得分:15)

您需要为该图片添加border-radiushttp://jsfiddle.net/WouterJ/48Y37/1/

答案 1 :(得分:7)

要对实际图像进行舍入,您必须确保<img>标记的类实际上具有border-radius属性。例如:

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

相应的CSS看起来像这样:

.roundrect {
border-radius: 15px;
}

答案 2 :(得分:-3)

  1. 使用截图工具复制图片并粘贴到 Paint 中。
  2. 选择圆角矩形并将颜色更改为白色
  3. 选择矩形的最大尺寸。
  4. 然后在图片周围放置白色圆形边框。
  5. 然后复制粘贴任意位置的圆形图片。