角丸(border-radius:)をほぼ全てのブラウザに + ドロップシャドウ(box-shadow:)を一部のブラウザで使えるようにしてみた
今日も uuAltCSS.js をいじってました。
ハイ・チーズ
左から、Firefox2/3/3.5, Opera9.52/10β, Safari4, Google Chrome3, IE8 です。ブラウザ毎の縮小率がバラバラですね。
記念写真には写ってませんが、もちろん Opera9.27, IE6, IE7 でも動きます。
canvas で shadowColor が使えるブラウザ(Firefox3.5, Safari3+, Chrome1+) と IE6〜8 なら影も描画されます。
それ以外のブラウザでも、擬似的な影が表示されるように、これから処理を追加します。
そうそう、Firefox2 がね…
<style> .base { margin: 2em; padding: 1em; border: 1em solid navy; } .boxshadow2 { box-shadow: blue 1em 1em 2em; -webkit-box-shadow: blue 1em 1em 2em; -moz-box-shadow: blue 1em 1em 2em; background-color: transparent; } .radius { color: gold; background: blue url(lena.jpg) repeat top left; border: 1.5em solid skyblue; border-radius: 5em; -webkit-border-radius: 5em; -moz-border-radius: 5em; } </style>
上記の CSS を食わせると Firefox2 は元々こういうレンダリングをします。
これ(↑) が、uuAltCSS.js を導入することで、こうなります(↓)
ちょっと余白が多いので、後でなんとかします。