作角を丸めを使用CSS[定休日]
https://stackoverflow.com/questions/7089
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
の作成方法を教えてください角を丸めを使用CSS?
解決
以来、CSS3を導入し、最良の方法の追加丸いコーナー利用のCSSを使用して border-radius 物件です。ができ を読み、仕様の の財産、 有の実装の情報をMDN:
ご利用の場合はブラウザ な の実施 border-radius （クローム前v4、Firefox前v4IE8、オペラ前v10.5、Safari前v5、以下リンクより詳細なビバップからハードバップの異なるアプローチ。いつも自分のサイトやコーディングスタイルと行きます。
他のヒント
私はこの早い時期の作成スタックオーバーフローなどの見 他の の作成方法に角がないような感覚だけでも、下水道.
border-radius:
そう思います。この作品でOK最新のバージョンのSafari、FirefoxなどにIE7(とは思わないから、IE8)またはオペラ座があります。
一方でhacksのです。私は違うその他の人の思いが最することが全IE7,FF2/3、Safari3、オペラ9.5の..
私はく丸いコーナーだけではcss合していないブラウザサーバーのアップグレードなどのコンテンツは平坦ました。場合に角がないように重要なサイト利用できるこれらのラインです。
を利用する場合は全角のと同じ半径のことは容易であることが少なくない。
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
たい場合には制御コーナーです:
.my_rounded_corners{
border: 1px solid #ccc;
/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}
して、各セットでブラウザ固有の不具合により、スタイルに行を宣言しているために標準的な方法によることを想定した場合にはその他（とIE）を決定を実施する機能に弊社のスタイルに準備しています。
かれたその他の回答は、この作品が美しく、Firefox、Safari、カミーノ,ロードしてください
について興味のある方はもちろん作成のコーナー IEしている場合、この利用- http://css3pie.com/
私の使用をお勧めしの背景ます。その他の方法ではなくて、シコシコとしたもののない平滑化、および無分別なマークアップ等を行っています。これは、JavaScriptを使用しています。
としてBrajeshwarとを使用 border-radius css3セレクタをクローズします。現在までに応募できる -moz-border-radius や -webkit-border-radius Mozilla、Webkitに基づくブラウザです。
ではどうなるのInternet Explorer?.マイクロソフト社の多くの動Internet Explorerにおいても追加装備されます。
こちら:a .htc 行動ファイルを取得 round-corners から border-radius の価値。ります。
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
もちろん、行動のセレクタは、有効なセレクターができるで異なるcssファイルと条件付きコメント（IE）
サポートCSS3で実行されている新しいバージョンのFirefox、Safari、Chromeでも眺める"ボーダーの半径".
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
というCSSの簡略表現にとインターネットで提供される書面に拡張形式で、このように達成の異なるボーダーの半径のtopleft,topright。
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;
jQueryでは、いするものとして取り組ます。cssサポートは最小限の画像でもヒることができ要素を選択しい丸いコーナー jQuery意味くものであることは疑いないと主張します。シュナイザー十世さん頑張プラグインも近い使用のためのプロジェクトで作業。 http://plugins.jquery.com/project/jquery-roundcorners-canvas
あJavaScriptの方法（その他の回答ものでは純粋にスタイリング、私のような対使用のお客様のスクリプトです。
のも好きでしたが、その制限)、4つの丸いコーナー画像での4隅のボックスにCSS:
<div class="Rounded">
<!-- content -->
<div class="RoundedCorner RoundedCorner-TopLeft"></div>
<div class="RoundedCorner RoundedCorner-TopRight"></div>
<div class="RoundedCorner RoundedCorner-BottomRight"></div>
<div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>
/********************************
* Rounded styling
********************************/
.Rounded {
position: relative;
}
.Rounded .RoundedCorner {
position: absolute;
background-image: url('SpriteSheet.png');
background-repeat: no-repeat;
overflow: hidden;
/* Size of the rounded corner images */
height: 5px;
width: 5px;
}
.Rounded .RoundedCorner-TopLeft {
top: 0;
left: 0;
/* No background position change (or maybe depending on your sprite sheet) */
}
.Rounded .RoundedCorner-TopRight {
top: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px 0;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
right: -1px;
}
.Rounded .RoundedCorner-BottomLeft {
bottom: 0;
left: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: 0 -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
bottom: -20px;
}
.Rounded .RoundedCorner-BottomRight {
bottom: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
bottom: -20px;
right: -1px;
}
このように、その限界を背景に四捨五入箱は無地でその他の角なの背景ですが、非常用いただけます。
更新： 改善のimplentationによるスプライトシートです。
私のようなこのソリューションを、そのます。htcするIEを描画するのに曲がる。
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Safari、google Chrome、Firefox>2,IE>8Konquerer（その他）の取得ができないことがあり、CSSを使用 border-radius 物件です。もともとは正式にはスペックし、ご利用くださいベンダーの特定のプリフィックス---
例
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
JavaScriptの解は一般に追加ヒープの小さな divsく切って使え、マージンに1pxノッチました。一部の場合にも活用SVGに打ち出されている。-
IMOには、CSSの方が良いのですが低下します。で優雅にしているブラウザをサポートしないのです。これは、もちろん、場合にのみ、お客様な実施して非対応ブラウザなどの家 < 9.
このドキュメントを編集するには、/js/css溶液かったのです。あ1pxの丸め誤差の絶対位置決めがIEだといったコンテナにするとともにピクセル数広いからです。
HTML:
<div class="s">Content</div>
jQuery:
$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');
CSS:
/*rounded corner orange box - no title*/
.s {
position: relative;
margin: 0 auto 15px;
zoom: 1;
}
.s-iwrap {
border: 1px solid #FF9933;
}
.s-iwrap2 {
margin: 12px;
}
.s .br,.s .bl, .s .tl, .s .tr {
background: url(css/images/orange_corners_sprite.png) no-repeat;
line-height: 1px;
font-size: 1px;
width: 9px;
height: 9px;
position: absolute;
}
.s .br {
bottom: 0;
right: 0;
background-position: bottom right;
}
.s .bl {
bottom: 0;
left: 0;
background-position: bottom left;
}
.s .tl {
top: 0;
left: 0;
background-position: top left;
}
.s .tr {
top: 0;
right: 0;
background-position: top right;
}
画像はあくまで18px幅は、4つの全ての角を満載です。のように見えます。
注意：必要としない一番内側のラッパーには、利用率の内側のラッパーでマイペー項、見出しも保証拠金に崩壊する。でもスキップのjqueryとだけ入れて内側のラッパーのhtml.
確かにあれば、その幅は一定では、スーパーを使用して簡単でCSSとな攻撃やぶ.で必要なときにスケールの両方で取り上げるべきだった周.一部のソリューションの大容量化､divs重ねる意識を高めるためのものです。
私の値段が高くなりますが、そのデザイナーがいれば利用したい角を丸めると思い)する必要があり一定の幅になります。デザイナーの愛丸いコーナー（そういうことを合理的に妥協を強いられます。
Ruzee境 は、Javascriptの基頼性の丸いコーナー液がその場で発音を確認することが動作するすべての主要なブラウザ(Firefox2/3以上、Chrome、Safari3,IE6/7/8の場合)、ものを作ることが、四捨五入要素との親要素に含まれる背景イメージです。または、国境影と光る.
の新しい RUZEE.ShadedBorder 別のオプションが欠けてい取得サポートスタイルから情報。
の場合、ボーダーの半径溶液がこのサイトを生成し、cssとなるのでsafari/chrome/FF.
とにかく行きたいというニーズがデザインに影響を及ぼす可能性があり、丸いコーナー見れば、Twitterで言えばいいのF****への家、オペラます。角を丸めるのは嬉して、私は個人的にはokこの涼しくない利用者の利用IE:).
もちろんなの意見おります。リンクはこちらです: http://border-radius.com/
加htc解のも、ここでいうソリューションや事例へ 丸いコーナーの家.
ありません"最高"となっているので、やり方がありませんとする方法で位置づけはどうなるんですか。とはいえ、私の記事が掲載され創造CSS+画像に基づく、流体の丸いコーナー技術がここに:
概要このトリックすると入れ子DIVs、背景画像の繰り返し位置決めが可能です。のための固定幅レイアウト（固定幅は伸縮性のある高さだ三DIVsびます。流動幅はレイアウト（伸縮性のある幅と高さ)する必要がありま析DIVs、四ます。あ性を高めることが考えられますがこれも複雑ですがまぁそのneatest溶液です。なhacks、JavaScriptです。
に書いたブログ記事ですが、詳細情報, こちらをご参照
<div class="item_with_border">
<div class="border_top_left"></div>
<div class="border_top_right"></div>
<div class="border_bottom_left"></div>
<div class="border_bottom_right"></div>
This is the text that is displayed
</div>
<style>
div.item_with_border
{
border: 1px solid #FFF;
postion: relative;
}
div.item_with_border > div.border_top_left
{
background-image: url(topleft.png);
position: absolute;
top: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_top_right
{
background-image: url(topright.png);
position: absolute;
top: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_left
{
background-image: url(bottomleft.png);
position: absolute;
bottom: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_right
{
background-image: url(bottomright.png);
position: absolute;
bottom: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
</style>
で非常に良く一致している。なJavascriptが必要でCSS、HTML.最小限のHTMLを妨害する行為があった場合。このうモノを掲載してなIE6特定のhacks、チェックがあるようには見えません。また、別のトリックの内部の各コーナーイメージに透明なブロックテキストのコーナー。外側の部分にはならない透明なカバーできる、ボーダの不満div.
また、CSS3に幅広く対応ボーダーの半径としているので、私たちの最高の材料を取り扱っている丸います。
なCSS、jQueryは言及されています。が必要な場合は完全に制御し、背景との国境の要素を与えるjQuery背景のキャンバスプラグイン いただけるミュージアムです。とくHTML5Canvas要素を背景に、できるヨ線を背景には国境ます。丸いコーナー系です。
オペラなボーダーの半径られているので、その先から明らかにすることによってはリリース後のバージョン10).一方で、でき CSSを利用設定SVGの背景を作成し、同様の効果.
