CSSシークレット ―47のテクニックでCSSを自在に操る

知っておくべきポイント

box‐shadow, outline, P.66の「複数のボーダー」

課題

図2.15 のように、ボーダーやアウトラインの外側は直角のままで、内

側だけを丸めたいというケースが考えられます。これは興味深い表示で、

まだあまり使われていません。次のように要素を2 つ追加すれば、望む表

示を得られます。

角の内側を丸める

4

<divclass="something‐meaningful"><div>

 Ihaveanicesubtleinnerrounding,

 don’tIlookpretty?

</div></div>

.something‐meaningful{

 background:#655;

 padding:.8em;

}

74

2章：背景とボーダー

図2.15

角の内側だけが丸められたアウトライ

ンを持つコンテナ要素

Ihaveanicesubtleinner

rounding,don󲫆tIlookpretty?

HTML

これでも確かにうまく表示されますが、本質的に要素は 1 つあれば十分

なのに2 つ目の要素が必要になってしまいます。1 つの要素だけで同じ表

示を得られないでしょうか。

解決策

上のコードには、背景関連の機 ...