Question

下面是带有圆角的div的html，在这个div中是另一个叫做向上滑动的动画div，它也有圆角。在初始div中，我有一个带有谷歌地图的iframe。我无法给出这个iframe圆角。有人可以向我解释我做错了吗？

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

Answer 2

尝试为.maincontentdiv overflow: hidden;提供帮助。另外，请确保重新使用代码并尽量不使用内联CSS，它会为您提供更多代码概览。

＆＃13;

.maincontentdiv {
  position: relative;
  height: 100px;
  width: 100%;
  -moz-border-radius: 15px;
  border-radius: 15px;
  overflow: hidden;
}
.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%;
}

＆＃13;

<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>
</div>

＆＃13;

查看result。

Answer 3

您只需将iframe包装在相对 div中，其中 border-radius 设置为溢出：隐藏

将此div设为您想要iframe的宽度和高度，然后设置iframe宽度：100％和高度100％

示例：

<style>
    .mapwrapper {
      position: relative;
      width: 450px;
      height: 450px;
      border-radius: 50%;
      overflow: hidden;
      margin: 50px auto 50px auto;
    }

    .googlemap {
      width: 100%;
      height: 100%;
    }
</style>   

 <div class="mapwrapper">
        <iframe class="googlemap" src="#" frameborder="0" allowfullscreen></iframe>
 </div>

工作jsfiddle示例： https://jsfiddle.net/MichaelDolphin/0n2phL8d/

Answer 4

有一种更简单的方法。你所要做的就是给它填充。

.pics{
    background-color: grey;
    margin: 25px;
    padding:0px;
    border-radius: 20px;

}

以上是我正在使用的网页上使用的一大块CSS。

给iframe一个边界半径

4 个答案: