2

内側の div の背景も影響を受けるように、(Chrome と Opera の) div で border-radius を使用することは可能ですか? そうでない場合、他にどのようにこの効果を達成できますか?

例: http://jsfiddle.net/fE58b/1/

IE9 & FF7 で問題なく動作します。

ありがとうございました。

4

3 に答える 3

0

そのため、Cristi が上で述べたように、一部のブラウザでは、オーバーフローした子を親の曲線の境界に沿ってクリッピングするのに少し問題があるようです。(少なくとも Webkit の場合) 親の境界半径の影響を受ける子のオーバーフローをレンダリングするには、親と子の両方を静的に配置する必要があるようです。

さらに、この静的な配置でも、子要素に不透明度の値を設定すると、その親のオーバーフロー境界が壊れてしまうようです (推測する必要がある場合、これは不透明度の値と関係があると思います)ハードウェア アクセラレーション グラフィックスをトリガーします。この場合、3D 変換によって同じグリッチが生成されます)。

幸いなことに、絶対配置の祖父母を使用して、その静的な子の寸法と位置を制御し、rgba背景とテキストで要素の不透明度をシミュレートできます。たまたま、役に立つかもしれないこれらの回避策のいくつかを示すjsfiddle スニペットがあります。

于 2012-06-19T23:22:36.737 に答える
0

背景画像を から に移動するだけで機能#contentし.boxます。

.box {
     background:url(...so_70s_background.jpg) top left repeat;
}

また、境界線を別の div に配置する必要がある場合は、いつでもボックスの外側に新しい div を追加できます。

<div class="box-outer">
    <div class="box">
        <div id="content"></div>
    </div>
</div>

必ず適用してください：

.box-outer {
    width:500px;
    height:500px;
    position:absolute;
}
于 2012-06-19T22:20:21.297 に答える
0

国境のラダス問題を解決するためにフォローしているユーザー

         border-radius: 20%;        /* FOR ALL NEW BROWSER OF HIGHER VERSION*/
    -webkit-border-radius: 20%;      *FOR ALL OHTER OLD BROWSER*/
    -moz-border-radius: 20%;     /* FOR MOZILLA FF*/
于 2012-06-20T10:36:52.407 に答える