CSS3 影をつける 角丸

質問

CSS3 影をつける　角丸

CSSで四角の角四つを丸くする方法と、四角に影をつける方法があるのともうのですが、
教えてください。

もうひとつ、web-kit？とか言うのをダウンロードして、それを使うように
どこかのページ（CSS関連）で見たのですが、あれはどう使うのだったのでしょうか。

回答No.1

think49 · ベストアンサー

"border-radius" で検索すると、情報が見つかると思いますよ。

CSS Backgrounds and Borders Module Level 3
http://www.w3.org/TR/css3-background/#the-border-radius
Safari CSS Reference: Supported CSS Properties
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266--webkit-border-radius
-moz-border-radius - MDC
https://developer.mozilla.org/Ja/CSS/-moz-border-radius

CSS3 角丸を表現する border-radius | CSS Lecture
http://www.css-lecture.com/log/css3/css3-border-radius.html

お礼

みなさんありがとうございました。

回答No.4

fiv0039y

http://garage.mods.jp/ex/css-circle/
円角はこのページの解説がわかりやすかったですよ。

回答No.3

think49

#1です。

ちょっと情報が古かったかも。
GoogleChrome4.1, Opera10.53なら接頭語なしで対応できますね。(IE8, Firefox3.6はNGでした)

<pre style="border: solid 1px #ccc; border-radius: 10px; padding: 1em; background-color: #eef;">
border: solid 1px #ccc;
border-radius: 10px;
padding: 1em;
background-color: #fee;
</pre>

Opera 10.50 が新たにサポートした CSS | ヨモツネット
http://www.yomotsu.net/wp/?p=560

回答No.2

neko-ten

とりあえずCSS3に関しては回答があるので、そちらを。

WebKitに関してですが、CSS3と関係ないです。
強いて言うならWebKitがCSS3対応してるってことくらい。
それを使うつっても、レンダリングエンジンなのでWebKitつかって何かするもんでもないです。
たぶんサイトはWebKitで動作確認しろ的なことを書いてたんじゃないかな？
Chromeあたり使えばCSS3動作しますし、それで十分。
というか、Google Chrome/Apple SafariはWebKitを使ったブラウザです。