tableにborder-radiusは効く！しかし、box-shadowは丸まらない。

マジ、表題の通りです。

泣きそう。

頂いたデザインではねー

テーブルがあってね、可愛いんですよ、角丸な感じで。

しかもドロップシャドウをかけて良い感じになってるんですよ。

カワイイ、カワイイ。

          <table>
            <tr>
              <th>テースト</th>
              <td>1つ目</td>
              <td>2つ目</td>
              <td>3つ目</td>
            </tr>
            <tr>
              <th>下の段</th>
              <td>ポテチ</td>
              <td>アクエリ</td>
              <td>ポカリ</td>
            </tr>
          </table>

あ、テーブルだ。ってHTMLはこうするやん？

// 右下の丸め
table{
  box-shadow: 10px 10px 0 0 #fccccc;
}
tr:last-child{
  td:last-child{ 
    border-radius: 0 0 10px 0;
  }
}
// 以下略

まぁ、こうするわけですよ。

じゃあどうなる？

丸まらない！！一切丸まらない！！

そう、ここまで書いて気付いた。

理由は明確で丸めたのは、
ドロップシャドウをかけたtable本体ではなく
td要素だったから。

そうだよね、これだとtdとかthを丸めてるだけだし、
そこからドロップシャドウをかけてるわけではないので
そうなるよね。

辛い:;(∩´﹏`∩);:

疲れてるんだろうか・・・

寝よ。