pagetaka

写真、PC、ネット、岡山の話題をお届けします

原発ゼロをめざす岡山アクション○毎週金曜日お昼12:15から中国電力岡山支社周辺(岡山市北区内山下1-11-1)○連絡先:岡山県労会議内の実行委員会、086-221-0133

CSS3 border-radius

CSSのバージョン3、ブロック要素の外辺にborderというプロパティがあります。

CSS2ではできなかった、また、CSS3でもしばらく実装が進んでいなかった時期があり、FFなどがローカルルール的に表示できるようにしていた、角を丸く表示する設定「border-radius」が、最新のブラウザではだんだんと表示できるようになっているんだ~と感じているところです。

この上のピンクの枠が角丸になって表示されていれば、あなたがお使いのブラウザは新しい、のだろうと…。

しかし、すべてのブラウザで問題なく表示されるようになるのは…はて? 上のピンクの枠内、実は2段組みのCSSを「 column-count」で書いているんですが…おそらくNGでしょうね。横着者のTAKAは、段組みがCSS3で正式に採用されたのか、はたまたそれがブラウザで実装されたのか、知らないという…うぇ~ん。詳しい方、教えてください…。なお、FFとchrome用のローカルCSSを、後で書き加えました…。

TAKAが使っているブラウザ、chrome、ie、ffとも角丸はOK、「 column-count」による段組みはNGですたが…。あ、ピンク部分の関連CSSは、HTMLタグ内に以下の通り書いてます。

<div style="border: solid 1px pink; border-radius: 20px; padding: 12px; background-color: #ffeeee; column-count: 2;-moz-column-count: 2;-webkit-column-count: 2;">CSSのバージョン3、…感じているところです。</div>