16

http://jsfiddle.net/48Y37/

画像上部の両角を丸くしたい。技術的には存在しますが、画像で覆われています。私はウェブ全体を見渡し、人々が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;
}
4

3 に答える 3

15

border-radiusその画像にを追加する必要があります：http： //jsfiddle.net/WouterJ/48Y37/1/

于 2012-07-21T21:15:31.610 に答える
9

実際の画像を丸めるには、<img>タグのクラスに実際にborder-radiusプロパティがあることを確認する必要があります。例えば：

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

対応する CSS は次のようになります。

.roundrect {
border-radius: 15px;
}
于 2012-07-21T22:16:49.423 に答える