css 角丸（●wordpress）｜enjoy photographing

●wordpress

css 角丸

by kokupsy_un

2010.01.18. 月 15:29

css3 と http5 で使用できるようになる角丸の表現。
いくつかのブラウザではサポートされている。

テーマ FotoFolio の css にも Firefox用のcssがあったが、下記のように他のブラウザでも表示できるように2行を追加した。
これで Google Chrome 、Safari はOKである（IE 8、Opera は×）。
使っている箇所はコメント記入欄の枠一箇所のみ。

div {
    border-radius: 10px;	/* CSS3草案 */
    -webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
    -moz-border-radius: 10px;	/* Firefox用 */
}

※角丸表示をブラウザに依存しない java スクリプトが人気のようだ。
ここでは使用しないことにしたが、興味があれば以下でどうぞ。
border-radius.js

wp-syntax-cache-content: a:1:{i:1;s:1160:" <div class="wp_syntax" style="position:relative;"><table><tr><td class="code"><pre class="css" style="font-family:monospace;">div { border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ }</pre></td></tr></table>div { border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ }</div> ";}

One Comments to “css 角丸”

kokupsy より:

2010/02/11 03:15

KHTML用の角丸指定を追加した。

-khtml-border-radius: 10px;

khtmlとは、linux KDE プロジェクトが開発したHTMLレンダリングエンジン。
これで Konqueror （というブラウザ）でも角丸が表現される。

do edit RAW(you like Straight Photography? Pictorialism?)

●wordpress

css 角丸

One Comments to “css 角丸”

about

location

archives

Portfolio

The Photographer