html - 给 iframe 一个边框半径

Question

下面是一个带有圆 Angular 的 div 的 html，在这个 div 里面是另一个名为 slide up 的动画 div，它也有圆 Angular 。在初始 div 中，我有一个带有谷歌地图的 iframe。我无法为这个 iframe 设置圆 Angular 。有人可以向我解释我做错了什么吗？

html

<div tabindex="0" class="maincontentdiv" style="box-shadow: 5px 5px 5px #999; height:    395px;"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2445.0941239724475!2d0.12181700000000163!3d52.20533700000002!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d870de87416503%3A0xe31084dab9bf0ec1!2sThe+Cambridge+Design+Company!5e0!3m2!1sen!2suk!4v1400231375571" width="100%" height="395"     frameborder="0" style="border:0-moz-border-radius: 15px;
border-radius: 15px;" ></iframe>

我们的剑桥室内设计工作室

剑桥设计工作室是我们的中心。

CSS

.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
-moz-border-radius: 15px;
border-radius: 15px;
}
.slideup {
position: absolute;
width: 100%;
bottom: -2px;
min-height: 0;
color: #FFF;
transition: min-height 250ms ease-in;
background-color: #666666;
text-align: center;
height:20px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.maincontentdiv:hover > .slideup,
.maincontentdiv:focus > .slideup { 
min-height: 65%;
}

Answer 1

问题很可能是背景不透明的子元素会剪掉边框的内半径。要解决此问题，您可以应用 overflow:hidden。

像下面这样更新您的 maincontentdiv。

.maincontentdiv {
position: relative;
height: 100px;
width: 100%;
-moz-border-radius: 15px;
border-radius: 15px;
overflow:hidden;
}

DEMO