[CSS]CSS 3のサンプルとブラウザでの見え方

CSS3対応ブラウザも増えてきたので、CSS3.infoのエントリー「CSS3 Preview」のサンプルが、どのようにブラウザで表示されるかを試してみました。

使用したブラウザは、Firefox 3beta5, Safari 3.1, Opera 9.5betaです。
各プロパティの下の記載は、キャプチャを撮ったブラウザで、対応ブラウザの全てではありません。

Border

border-color
Fx 3

border-image
Safari 3.1

border-radius
Fx 3

box-shadow
Safari 3.1

Background

background-origin and background-clip
Safari 3.1

background-size
Safari 3.1

multiple backgrounds
Safari 3.1

Color

HSL colors
Fx 3

HSLA colors
Fx 3

opacity
Safari 3.1

RGBA colors
Fx 3

Text effects

text-shadow
Safari 3.1

text-overflow
Fx 3

word-wrap
Safari 3.1

User-interface

box-sizing
Fx 3

resize
Safari 3.1

outline
Fx 3

Selectors

attribute selectors
Safari 3.1

Other modules

media queries
Safari 3.1

multi-column layout
Fx 2

speach
Op 9.5