我想在图像顶部的两个角上都有圆角。技术上它在那里,但被图像覆盖。我看过整个网络,我看到人们谈论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;
}
答案 0 :(得分:15)
您需要为该图片添加border-radius
:http://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)