Permalink
Fetching contributors…
Cannot retrieve contributors at this time
75 lines (50 sloc) 4.85 KB
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プロパティで作った枠線は角丸にすることができない
Advent Calendar
CSS
CSSで出来そうで出来ないことシリーズ1

表題の通り、outlineプロパティで作った枠線は角丸にすることができない。すなわち、border-radiusで角丸に変形させたボックスにoutlineを指定すると、角丸でなく角を持ったまま枠線がつくということだ。

JSFiddleでborder-radiusoutlineを両方指定したデモを作った。黒線がborderで水色線がoutline。見ればすぐわかる。

<iframe width="100%" height="270" src="http://jsfiddle.net/o_ti/tkrs6eva/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

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の外側に角丸の枠」ができあがる。

<iframe width="100%" height="450" src="http://jsfiddle.net/o_ti/tkrs6eva/1/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

outlineにしかできないこともある…わけではなかった

outline-offsetというプロパティがある。outlineと併せてこれを指定すると、ボックスとoulineの間に空白を作ることができる。ただしIEは最新版(2015/11/30時点でIE11)でも対応していない。

<iframe width="100%" height="270" src="http://jsfiddle.net/o_ti/tkrs6eva/2/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
.outline{
    outline: 10px solid skyblue;
    outline-offset: 10px;
}

box-shadowではborderと自身の間に隙間をつくることはできないので、こういうのはoutline-offsetしかないかなぁと一瞬思ったけど、擬似要素で完璧に代替できた。またTRBLか。

<iframe width="100%" height="270" src="http://jsfiddle.net/o_ti/tkrs6eva/3/embedded/result,css,html/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

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でなかったことにして生きていく僕たちなのであった。

outlineプロパティはクライアントの要望で消すことはしばしばあるのだけど、:focusのスタイルを何も用意しないというわけではないです。

このエントリは半年近く前に下書きをしたもので、某氏が企画した「CSSで出来そうで出来ないことシリーズ」への寄稿として準備していたものだった。話が一向に動かない感じだったので、もう自分で素の記事にしてしまうことにした。しかしただあげるのもつまらないなぁと思って、Adventarを見ていたらちょうどCSS Property Advent Calendar 2013が1日空いていた。ということで、このエントリはCSS Property Advent Calendar 2013の20日目として書きました。

完走おめでとう!