CSSで角丸を表現する方法をちょっと詳しく書いてみる
CSS3では、border-radiusプロパティを使う事で角丸を表現する事ができます。 この方法を少し詳しく調べてみました。 .radius{ border-radius: 10px; /* CSS3草案 */ } ここの10pxとは角丸の半径の大きさとなります。 ただし、現在のところはCSS3はまだ草案なので、 Safari、Google Chrome では -webkit-border-radius、 Firefox では -moz-border-radius と指定します。 Safari、Chorme用（-webkit-border-radius） 4辺を一括指定する場合は以下のように書きます。 .webkit1{ -webkit-border-radius: 10px; /*一括指定*/ } 4辺を個別に指定する場合は以下のように書きます。 .webkit2{ -webkit-b
border-radius + -moz-border-radius + (Nifty Corners * IE behavior) - 徒書
border-radius + -moz-border-radius + (Nifty Corners * IE behavior) これまではさほど関心を持っていなかった角丸なのですが、最近のはてなブックマークで角丸を扱った記事が多く取り上げられてたり、CSS Nite Vol.6(見に行ってました)でも角丸が取り上げられたりしていたので、今更ながらにわかに興味が出てきたのでした。 たぶん、自分が角丸へ関心を持つのを避けていたのは、作る側として「実現するのがややこしいから」ということだったと思うのですが、見る側からしてみると、角丸のもつ見た目の印象はかなり効果的だよなあ、と考えるようになってきました。最近見たものだと、Catalystでサンプルアプリケーションを作った時のデフォルトページが、-moz-border-radiusをつかったスタイルで、衝撃的でした。 さて角丸をどう実現するか
『記事内の画像の角を丸くする。border-radius(CSS3)』
<style type="text/css">.entry .contents img[src*="user_images"]{border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;}</style> 数値を大きくするほど丸くなります。 似たような部分が3箇所ありますが、現在のところは「こんなものだ」と思っておいてください。 数値は全部同じにしておきましょう。 今回の指定では、Amebloさんの画像フォルダから呼び出した画像にだけ適用されるはずです。 絵文字アイコンやおねだりボタンなどには適用されません。 ※使い方が分からない方はこちらの記事を参考にしてみてください。 『フリープラグイン、フリースペースを利用したカスタマイズ。編集前の準備。』 『フリープラグイン、フリースペースを利用したカスタマイズ。編集
border-radiusプロパティ
CSS3 の border-radiusプロパティはボックスの角を丸める際に利用します。 各コーナーの値の設定に依って、 さまざまな形のボックスを表現できるようになりました。 (*´ω`*) 丸めは、指定された半径の円、あるいは楕円の円周、となります。 左上 border-radiusプロパティを使って角丸ボックスを作る。 ※下記 サンプルコード： ボーダーは指定がない場合は border:2px solid #000;です。 必ず書き加えてください。背景色やテキストなどは別途設定してください。 ４つのコーナーを同じ半径の角丸に、 値１つ .radius-Box { border-radius: 15px; /* 半径を15px に */ /* 値の単位には px,emなど 或は %を使用 */ } 正円形 高さ、幅を同じにして 値を ５０パーセントに .radius-Box { heig
border-radius｜プロパティ｜CSS HappyLife ZERO
border-radiusプロパティは、四つ角の半径を一括指定できるショートハンドプロパティです。 これにより、指定した要素の角を角丸にする事ができます。 角を丸くするだけなのにこのプロパティが使えるだけで、角丸なサイトのデザイン再現用のdiv要素が減り、コーディングもかなり楽になってきます。 とはいえ、角丸は情報を提供するだけなら有っても無くても変わりませんが、ユーザーに与える印象は大きく異なってきます。なので、IEユーザーが多い現状では、デザインとして重要な部分は従来通り背景画像にするなど、訪れるユーザーの事も考慮しながら使うと良いかと思います。 なお、border-radiusプロパティを含む、「CSS Backgrounds and Borders Module Level 3」は現在（2010/01/17） Candidate Recommendation（勧告候補）なので、まだ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
border-radiusをつかって丸を作ってみました | HTML5GOGO
fizsoft.net - Registered at Namecheap.com
border-radius.js サンプル - jsライブラリ - HTML5.JP
無効なURLです