web-dev-qa-db-ja.com

border-radiusとbox-shadowを一緒に使用する(CSS)

OK、これらのプロパティのどちらもまだ完全にサポートされていないことを知っていますが、とにかくそれらを使用しています:P

Border-radiusとbox-shadow(ベンダープレフィックスの有無にかかわらず)を追加すると、border-radiusの半径はbox-shadowに対して透明ではありません。例: http://cndg.us/3f41a

これを修正することは可能ですか?また、-webkit-box-shadowには非表示のdivにいくつかの問題があることに気付きました。

32
Gary

ここで確認できます: http://jsfiddle.net/Zw4QA/1/

div内に丸いコーダーを持つ要素があると思います。この要素にコーナーを適用する必要があります。現時点では、親要素の丸い角は、CSSで指定しない限り、子には適用されません。

より多くのCSS3マジックについては、このリンクを確認してください: http://css3please.com/

すべてのブラウザには、シャドウと境界の半径を処理する独自の方法があることに注意してくださいhttp://thany.nl/apps/boxshadows/

47
meo