SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【CSS】角丸(古い書き方のメモ)

これは古い書き方なので、こんな時代もあったんだな程度のメモです。

参考にしないでください。

今はどうなのかというとこちら → 【CSS】角丸

普通の角丸ボックスをするCSS

例)

div {
	border-radius: 5px; /* CSS3 */
	-webkit-border-radius: 5px; /* Webkit (Safari, Chrome ...) */
	-moz-border-radius: 5px; /* Firefox */
}

デモ)

div {
	width:300px;
	padding:20px;
	background:#336699;
	color:#ffffff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

角丸ボックスの各コーナーの丸みを制御する

例)

div {
	/* CSS3 */
	border-radius: 左上(水平方向) 右上(水平方向) 右下(水平方向) 左下(水平方向)/ 左上(垂直方向) 右上(垂直方向) 右下(垂直方向) 左下(垂直方向);
	/* Webkit (Safari, Chrome ...) */
	-webkit-border-top-left-radius: 左上;
	-webkit-border-top-right-radius: 右上;
	-webkit-border-bottom-right-radius: 右下;
	-webkit-border-bottom-left-radius: 左下;
	/* Firefox */
	-moz-border-radius-topleft: 左上;
	-moz-border-radius-topright: 右上;
	-moz-border-radius-bottomright: 右下;
	-moz-border-radius-bottomleft: 左下;
}

デモ)

div {
	background:#ffcc33;
	color:#cc0000;
	/* CSS3 */
	border-radius: 10px 20px 30px 100px / 10px 20px 30px 100px;
	/* Webkit (Safari, Chrome ...) */
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 20px;
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 100px;
	/* Firefox */
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 20px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 100px;
}

参考

-moz-border-radius(廃止)

border-radius(こっちを使おう!)

注意

これは古い書き方なので、参考にしないでください。

今はどうなのかというとこちら → 【CSS】角丸

関連するメモ

コメント