ページ

▼

2012/02/18

CSS3でボックスを角丸にするborder-radiusを使ってみた

追記(2012/06/01):border-radiusについてはベンダープレフィックス(8, 9行目の記述)は必要なくなりました。

SyntaxHighlighterで表示する程でもないコマンド系のコードを
角丸ボックスで表示しているのを見てカッコ良かったので取り入れてみました。
例↓
git push -u origin master

導入方法はコチラ：CSS3 角丸を表現する border-radius | CSS Lecture

こんな感じでカスタマイズしました。
span.cmd {
    color: #000000;
    margin: 5px;
    padding: 5px 10px;
    line-height: 2em;
    background-color:  #FFFFFF;
    border-radius: 10px;        /* CSS3草案 */  
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}
marginは左右にしか効かないので上下の幅はline-hrightで指定することになります。
IE8以下は角丸に対応していないので角が丸くなりません。
リンク先ではOperaでは角丸にならないと書かれていましたが、
少なくともOpera11.61では角丸になることを確認しました。