0

私はこの写真のためにこのコードを持っています：

CSS：

section.content {
    min-height: 500px;
    width: 73%;
    float: right;
    margin-bottom:0px;
    padding: 5px;
    background: white;
    -webkit-border-top-left-radius: 100px;
    -webkit-border-bottom-right-radius: 100px;
    -moz-border-radius-topleft: 100px;
    -moz-border-radius-bottomright: 100px;
    border-top-left-radius: 100px;
    border-bottom-right-radius: 100px;
    -webkit-box-shadow: 0px 0px 18px rgba(50, 50, 50, 0.79);
    -moz-box-shadow:    0px 0px 18px rgba(50, 50, 50, 0.79);
    box-shadow:         0px 0px 18px rgba(50, 50, 50, 0.79);
}

#map {
    width: 100%;
    height: 200px;
    margin-top: 15px;
    background: #F6F6F6;
    border-radius: 4px;
}

HTML：

<section class="content" id="contentContact">
    <div id="map"></div>
    <form id="contactForm" /></form>
</section>

border-radius div

次に、divの外ではなく、divの境界半径に従って要素を「カット」したいと思います。説明したと思います！ありがとう！

4

3 に答える 3

1

角が丸い外側または親divのCSSにこれを追加するだけです。

overflow:hidden

グーグルマップの場合、それはそれほど簡単ではありません。

いくつかの異なるオプションを見てください：

http://maps.forum.nu/temp/gm_rounded_corners.html

グーグルマップに丸みを帯びた角を置くためのトリックはありますか？

グーグルマップの透明な丸い角

于 2012-07-24T22:27:29.200 に答える
1

要素に設定border-radiusします。iframe

これがjsFiddleの例です

于 2012-07-24T22:41:08.843 に答える
0

すべての内部要素（子要素）に対してcssを作成します。

opacity:0.99;

または任意の不透明度<1。

于 2014-11-24T20:29:12.503 に答える