読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

compass 部分的に角丸(border-radius)りたい。

compass CSS

f:id:kikiki-kiki:20150302141255p:plain
compassで角丸(border-radius)にしたい時は

@include border-radius(5px);

みたいな感じでできますが、右上だけ角丸にしたいんじゃー!みたいな時の書き方をしょっちゅう忘れるのでメモ。

top・bottom / left・right で指定

@include border-corner-radius($vert, $horz, $radius);
  • $vert: top, bottom
  • $horz: left, right

左上 (top left) だけ角丸。

@include border-top-left-radius($radius);

右上 (top right) だけ角丸。

@include border-top-right-radius($radius);

左下 (bottom left) だけ角丸。

@include border-bottom-left-radius($radius);

右下 (bottom right) だけ角丸。

@include border-bottom-right-radius($radius);

上側 (top left & top right) を角丸。

@include border-top-radius($radius);

下側 (bottom left & bottom right) を角丸。

@include border-bottom-radius($radius);

右側 (top right & bottom right) を角丸。

@include border-right-radius($radius);

左側 (top left & bottom left) を角丸。

@include border-left-radius($radius);

関係ないのだけれど、僕は日本語で「右」「左」って言われた時にパッとどちらか分からないことが多いです。一瞬考えてあぁ!って分かる感じ。車とか乗ると事故りそう... cssのleftとかrightとかだと迷わないのですが。何なんでしょうね? (お箸どちらの手でも持つから!?)
f:id:kikiki-kiki:20150302141444p:plain

[参考]
Compass Border Radius | Compass Documentation