webkit - border-radiusとbox-shadowを一緒に使用する（CSS）

Question

わかりました。これらのプロパティはどちらもまだ完全にはサポートされていませんが、とにかく使用しています：P

border-radiusとbox-shadow（ベンダープレフィックスありとなし）を追加すると、border-radiusの半径がbox-shadowに対して透過的ではありません。例：http ：//cndg.us/3f41a0

これを修正することは可能ですか？また、-webkit-box-shadowに非表示のdivに関する問題があることにも気づきました。

Answer 1

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

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

CSS3マジックの詳細については、次のリンクを確認してください：http: //css3please.com/

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

Answer 2

MDNのドキュメントによると、ボックスシャドウは要素自体の境界半径を自動的に選択します。リンクは次のとおりです：https ：//developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#：〜：text = The％20box％2Dshadow％20property％20enables、on％20the％20same％ 20rounded％20corners

Answer 3

セルのあるテーブルの場合：

JSFiddle

HTML

<table>
    <tr>
        <td class='one'>One</td>
        <td class='two'>Two</td>
    </tr>
    <tr>
        <td colspan="2" class='three'>Three</td>
    </tr>
</table>

CSS

body {
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 padding: 100px;
 background: pink;
}

table {
/* basic */
 background-color: #fff;
 margin: 0 auto;
 width: 200px;
 padding: 100px;
 text-align: center;
/* border-radius */
 border-radius: 20px;
/* box-shadow */
 box-shadow: rgba(0,0,0,0.8) 0 0 10px;
 border-collapse: collapse;
}

table td{
  color: white;
}

td.one{
    border-radius: 20px 0 0 0;
    background-color: black;
}
td.two{
    border-radius: 0 20px 0 0;
    background-color: darkgreen;
}
td.three{
    border-radius: 0 0 20px 20px;
    background-color: darkred;
}

Answer 4

父のウェブサイトを見て回っているうちに、シャドウに半径特性を追加できることに気づきました。だから私はdivの中にカレンダーを持っていて、両方とも丸いエッジ（正確には0.7em）を持っていて、それにドロップシャドウを追加したかったのですが、ほとんどの場合、それらは正方形のエッジを持っているので、私の丸いエッジと衝突します。box-shadow属性をいじって、それに半径を追加するとどうなるかを決定しますか？だから私はしました。このテクニックについて言及しているオンラインの場所はどこにも見つからないので、私は何かユニークなものを発見したかもしれません。とにかく十分な裏話はここにあります：コードは次のとおりです。

CSS：

box-shadow-bottom-right-radius: 0.7em; //you can enter whatever value you want
box-shadow-bottom-left-radius: 0.7em;
box-shadow-top-right-radius: 0.7em;
box-shadow-top-left-radius: 0.7em;

そこに行くので、通常の境界線と同じように、ボックスシャドウ自体に半径を追加します。