- ベストアンサー
CSS3 影をつける 角丸
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
"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
その他の回答 (3)
- fiv0039y
- ベストアンサー率32% (8/25)
http://garage.mods.jp/ex/css-circle/ 円角はこのページの解説がわかりやすかったですよ。
- think49
- ベストアンサー率59% (285/482)
#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
- neko-ten
- ベストアンサー率55% (1287/2335)
とりあえずCSS3に関しては回答があるので、そちらを。 WebKitに関してですが、CSS3と関係ないです。 強いて言うならWebKitがCSS3対応してるってことくらい。 それを使うつっても、レンダリングエンジンなのでWebKitつかって何かするもんでもないです。 たぶんサイトはWebKitで動作確認しろ的なことを書いてたんじゃないかな？ Chromeあたり使えばCSS3動作しますし、それで十分。 というか、Google Chrome/Apple SafariはWebKitを使ったブラウザです。
関連するQ&A
- Webページの枠を角丸にしたい。
Webページの外枠(wrapper)を角丸にする方法ってありますでしょうか？ 角丸にする＋枠に影をいれたいのですが、 できればjavaを使わずcssのみでしたいと思っています。 日本語で解説してるページもあれば教えてください。
- 締切済み
- その他（プログラミング・開発）
- cssで凝った角丸ボックスを作りたい。
以下の条件を満たしたボックスをスタイルシートで作りたいのです。 ●ほぼ全てのブラウザに対応させたい。 ・化石のようなブラウザは結構ですが、 IE、FireFox、ネスケ、Operaには 崩れる事なく表示できるようにしたいです。 ●tableタグを使用したくない。 ・tableを使用せずにこのボックスを実現したいのです。 ●幅や高さは固定ではなく％で指定したい。 ・ブラウザのウィンドウサイズによって変化させたいのです。 ●角を丸く、その外側は透過させたい。 ・(bodyの)バックグラウンドカラーが凝っていて、％で指定したい為、 丸くさせた角の外側を透過させる必要があります。 参照1はかなり近いイメージなのですが、 角丸の外側が透過していません。(bodyのカラーと同じ色にしている) ちなみにこれを透過させると上下のバックグラウンドカラーや 左右の縦にリピートしているバックグラウンドイメージが見えてしまいます。 （参照1）http://www.sovavsiti.cz/css/corners.html ●左から右へとグラデーションをかけたい。 ・希望しているボックスがグラデーションの為、 参照2の黄色の縦線のように太くしたボーダーではできない。 （参照2）http://phrogz.net/CSS/roundcorner.html ●影を付けたい。 ・右下に影を付けたいです。ちなみに角丸・影などの画像は自分で作成できます。 ●画像はcssで表示させたい。 ・角丸やグラデーションなどの画像はhtmlにはimgタグを記述せず、 cssでバックグラウンドカラーなどで表示させたいと思っています。 ※これは変更・妥協可。 ●ボックスの中には文字などが入ります。 調べても考えても糸口が見つかりません。 もしご存知でしたら是非教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- 角丸テーブルのCSS化？
既存のテーブルレイアウトのサイトを、 CSSレイアウトに変更しようと思っています。 大体は大丈夫なのですが、問題は角丸テーブル。 縦横自由伸張の(影付き)角丸テーブルなので、 一番単純な部分でも9個のtdがある状態です。 これはどういうふうにしたら良いでしょうか。 9個のDIVというのは複雑すぎますし… 何か良い案があればアドバイスをお願いします。
- ベストアンサー
- HTML
- CSS３で角丸写真にシャドーを付ける方法
現在独学でＨＴＭＬ５とＣＳＳ３の勉強をしています。 写真を角丸加工してそれにＣＳＳで「box-shadow」プロパティで影を付けようとすると、角丸でカットした部分が白く残ってしまいます。 また、「border-radius」で角丸にしても同じです。 写真のサイズを300×225ｐｘにした場合、写真を角丸にしても（カット部分は透明にしてあります）、ボーダーで角丸にしても結局は長方形のスペースはそのまま残ってしまうと言う事ですか。 写真を角丸加工して影を付けたい場合は、フォトショップなどで加工したものを貼り付けるしかないのでしょうか。 ごまかしで右隅のカットした部分を黒に塗っておけばそれらしくは見えるのですが。 ＣＳＳで処理ができれば１回の設定でできると考えたのですが、やはり甘い考えだったのでしょうか。 宜しくお願い致します。
- ベストアンサー
- CSS
- CSS3で角丸の上部分を違う色にしたい
CSS3で角丸の上部分を違う色にしたいのですが、 どうすればいいでしょうか？ 角丸でくくって、 色を変えた角丸の上部分に、タイトルとか入れたい、です
- ベストアンサー
- CSS
- 角丸四角形に紙を切り抜く方法を教えてください！
角丸四角形に紙を切り抜く方法を教えてください！ 保育園で卒園アルバムを作ることになり、予算の関係で切り張りで原稿を作ることになりました。 個人のページは、10×22センチの画用紙に６個の角丸四角形を切り抜いたものに、 写真をはめ込んでいこうと考えています。 4センチ角のものと5.5×6.5センチ角くらいの角丸四角形を切り抜く方法をご存知の方いらっしゃいますでしょうか？ 20人分程作るので、きれいに仕上げるには、 クラフトパンチが良いかと思い、探しているのですが、４センチの正円と４．５センチのスカロップ（丸で周りが花のようになっているもの）は見つかったのですが、角丸四角形（四角形で角が丸くなっているもの）は見つかりません。 よろしくお願い致します！
- ベストアンサー
- 掃除・洗濯・家事全般
- Illustratorの角丸長方形ツールの丸の半径を決めるには
Illustrator CSを使っています。 角丸長方形ツールで四角を描くとき、角の丸まり具合（角の丸の半径？）を希望のものにするにはどうしたらいいのでしょうか。
- ベストアンサー
- 画像・動画・音楽編集
お礼
みなさんありがとうございました。