WET であり、対応するブラウザが限られること以外にも、クリッピン
グパスを利用すると(十分なパディングがない場合)テキストも切り落と
されてしまう問題があります。クリッピングパスの処理では、要素のボッ
クスとコンテンツが区別されません。一方、グラデーションは単なる背景
なので、切り落とされた角の部分とテキストが重なることもあります。ま
た、border‐imageはボーダーなので、テキストと重なることはありま
せん。
▶ PLAY!
play.csssecrets.io/bevel‐corners‐clipped
関連仕様
CSSBackgrounds&Borders
w3.org/TR/css‐backgrounds
CSSImageValues
w3.org/TR/css‐images
CSSTransforms
w3.org/TR/css‐transforms
CSSMasking
w3.org/TR/css‐masking
CSSTransitions
w3.org/TR/css‐transitions
CSSBackgrounds&BordersLevel4
dev.w3.org/csswg/css‐backgrounds‐4