图像上的圆角

我想要在图像顶部的两个角上的圆角。它在技术上是在那里，但正在被图像覆盖。我浏览过所有的网页，我看到有人谈论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; 
}

来源

2012-07-21 Jeremy Ahn

您可以提供有效的图片。顺便说一句，这是** Chrome **中令人讨厌的bug，它不会将图像放在“圆形”容器内。 – 2012-07-21 21:15:14

@ RokoC.Buljan对不起，我的一个朋友还没有为我创建一个标题。 – 2012-07-21 21:18:06

将'overflow：hidden;'添加到'section.container' – Stefan 2012-07-21 21:18:07

你需要一个border-radius添加到图像：http://jsfiddle.net/WouterJ/48Y37/1/

来源

2012-07-21 21:15:31

为了圆实际的图像，你必须确保该<img>标签的类实际上有border-radius属性。例如：

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

和相应的CSS是这样的：

.roundrect { 
border-radius: 15px; 
}

来源

2012-07-21 22:16:49

-1

复制与截图工具的图片，并粘贴到画图。
选择圆角矩形形状并将颜色更改为白色。
为矩形选择最大尺寸。
然后把图片周围的白色圆形边框。
然后复制和粘贴圆形图片无论你需要它。

来源

2018-01-12 15:39:21 user9209769

图像上的圆角

回答

相关问题