layout | page_type | page_datetime | page_id | page_title | page_tag | page_description | ||
---|---|---|---|---|---|---|---|---|
./src/html/post.pug |
post |
2015-11-30T00:49:15 |
73 |
outlineプロパティで作った枠線は角丸にすることができない |
|
CSSで出来そうで出来ないことシリーズ1 |
表題の通り、outline
プロパティで作った枠線は角丸にすることができない。すなわち、border-radius
で角丸に変形させたボックスにoutline
を指定すると、角丸でなく角を持ったまま枠線がつくということだ。
JSFiddleでborder-radius
とoutline
を両方指定したデモを作った。黒線がborder
で水色線がoutline
。見ればすぐわかる。
border-radius
の外側にも角丸の枠を作りたいなら、スプレッドを持つbox-shadow
で実現できる。
<div class="box radius boxshadow"></div>
.box{
border: 10px solid black;
width: 150px;
height: 150px;
background-color: gold;
}
.radius{
border-radius: 50px;
}
.boxshadow{
box-shadow: 0 0 0 10px tomato;
}
box-shadow
は4つ目にspread distanceと呼ばれる値を<length>型で指定することができ、これにより影を拡幅できる。影のつき方はborder-radius
の形状に従うので、上記コードのようにx,yのoffsetとblurを0にしてspread distanceを指定すれば「borderの外側に角丸の枠」ができあがる。
outline-offset
というプロパティがある。outline
と併せてこれを指定すると、ボックスとouline
の間に空白を作ることができる。ただしIEは最新版(2015/11/30時点でIE11)でも対応していない。
.outline{
outline: 10px solid skyblue;
outline-offset: 10px;
}
box-shadow
ではborderと自身の間に隙間をつくることはできないので、こういうのはoutline-offset
しかないかなぁと一瞬思ったけど、擬似要素で完璧に代替できた。またTRBLか。
outline-offset
は負の値も指定できるのでこういう表現も可能だけど、2015/7/7時点のCR版だと負の値の指定はat-riskであり、今後どうなるかわからない。
ついでに、outline-offset
はアニメーション可能ということなのでこういうデモを作ってみた。Google Chrome 46では意図通りに動いたけどFirefox 42ではちょっと使い物にならない挙動だった。IEもoutline-offset
には未対応だし、このプロパティに頼って凝った表現をするのは現実的に不可能という感じだ。
そして要素に対してマイナスのoffsetもアニメーションも擬似要素ならIE11でもFirefoxでも余裕で動く。
<iframe width="100%" height="270" src="http://jsfiddle.net/o_ti/tkrs6eva/4/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>今日もoutline
プロパティはreset.cssでなかったことにして生きていく僕たちなのであった。
このエントリは半年近く前に下書きをしたもので、某氏が企画した「CSSで出来そうで出来ないことシリーズ」への寄稿として準備していたものだった。話が一向に動かない感じだったので、もう自分で素の記事にしてしまうことにした。しかしただあげるのもつまらないなぁと思って、Adventarを見ていたらちょうどCSS Property Advent Calendar 2013が1日空いていた。ということで、このエントリはCSS Property Advent Calendar 2013の20日目として書きました。
完走おめでとう!