−角丸いろいろ−

indexに戻る XHTMLについて HTML5について スタイルシート CSS3 PIE Box Shadowエフェクト 角丸いろいろ ダウンロード

テーブル リスト フォーム1 フォーム2デザイン リンク イメージマップ ボーダー Flashタグ FaceBook設定

アイコンフォント アニメーション ボタンアニメ スクロールして固定 フキダシ onクリック タブ

display 画面固定・sticky［CSS］ パララックス［CSS］ フレキシブルボックス［CSS］ CSSハック一覧 CSS小技一覧 CSSサンプル雛形 CSSサンプル [table] CSSサンプル [form] CSSサンプル [flow]

基本の角丸

【 CSS 】
div.kadomaru{
	border-radius:20px;IE6-8用　角丸にするタグ
	-moz-border-radius:20px;Firefox
	-webkit-border-radius:20px;Safari,Chrome
	border:3px green solid;
	background-color: #ccffcc;
	padding:20px 20px 0px 20px;
	behavior:url(PIE.htc);IE6-8に適用させるタグ
	position:relative;IE6-8に適用させるタグ
}

今はこれだけで行ける！
border-radius: 15px;

《 注意点 》
border-radius:20px;　数値が角丸の深さを指定している。少なければ、角は尖る。

下だけ丸くする

>

【 CSS 】
border-top:none;
border-bottom-right-radius:30px;
border-bottom-left-radius:30px;
-moz-bottom-right-radius:30px;
-moz-bottom-left-radius:30px;
-webkit-bottom-left-radius:30px;
-webkit-bottom-right-radius:30px;

最終形：角丸グラデーション

【 CSS 】
#linkbox{
	color:#555555;
	padding:10px;
/*角丸*/
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
/*ボックスの影*/	
	box-shadow: 0px 2px 3px #777;
	-moz-box-shadow: 0px 2px 3px #777;
	-webkit-box-shadow: 0px 2px 3px #777;
/*グラデ*/
	background:linear-gradient(#eeeeee,#9fb7d4);
	background:-moz-linear-gradient(top,#eeeeee,#9fb7d4);
	background:-webkit-gradient(linear,left top,left bottom,from(#eeeeee),to(#9fb7d4));
	-pie-background:linear-gradient(#eeeeee,#9fb7d4);
	behavior: url(PIE.htc);
	position:relative;	
}

グラデーションは線形と円形の2種類ある。

【 線形 】
linear-gradient(top, #F00000 0%, #FFFFFF 100%)

【 円形 】
radial-gradient(center, ellipse cover, #F00000 0%, #FFFFFF 100%)

【 線形 】
.gradient01 {  
	background: -moz-linear-gradient(top, #fff, #e1e1e1);/* Firefox用 */
	background: -webkit-gradient(linear, left top, left bottom,from(#fff),to(#e1e1e1));/* Safari,Google Chrome用 */
} 
開始位置　→　終了

【 円形 】
.gurade2{
	background:-moz-radial-gradient(center, ellipse cover, #FFCC99 0%, #FFCC00 100%);
	background:-webkit-radial-gradient(center, ellipse cover, #FFCC99 0%, #FFCC00 100%);
	-pie-background:radial-gradient(center, circle farthest-corner, #FFCC99 0%, #FFCC00 100%);
	padding:20px;
	behavior: url(PIE.htc);
	position:relative;
	border:solid 1px #FF9900;
}

《 注意点 》
円形の指定で、circle（円形）、ellipse（楕円）どちらか指定出来る。