border-radiusプロパティは、ボックスの４つのコーナーの角丸をまとめて指定する際に使用します。それぞれの角丸コーナーは４分の１楕円になります。
| 指定したプロパティ | border-radius |
| table要素に指定した値 | 1em |
| td要素に指定した値 | 0.5em |
table.radius1 {
border:solid 10px #336633;
border-radius: 1em;
}
table.radius1 td {
background-color:#ccff99;
border-radius: 0.5em;
}
テキストを丸枠で囲む
▼上記サンプルのスタイルシート記述例（※注；ブロックの幅を任意の数値に指定）
p.border-sample1 {
font-size:15px;font-weight:bold;
text-align:center;
padding:5px;height:20px;
border:solid 5px #ff0000;
border-radius: 50%;
}
border-radius:30px 100px 20px 20px / 30px 30px 20px 20px; を指定
▼上記サンプルのスタイルシート記述例（※注；ブロックの幅を任意の数値に指定）
p.sample2 {
font-size:15px;
height:30px; background-color:#ccecf4;
border:solid 10px #7fcfe2;
border-radius: 30px 100px 20px 20px / 30px 30px 20px 20px;
linear-gradient()関数は、線形グラデーションを指定する際に使用します。
線形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色を定義することで作成されます。 linear-gradient()関数の書式は以下の通りです。
linear-gradient(開始位置と角度, 開始色, 途中色, 終了色);
開始位置と角度を指定すると、グラデーションの方向を定義することができます。 開始位置は、left・center・right、top・center・bottomのキーワード、パーセンテージ、pxなどの単位を付けた数値で指定します。 角度は、degなどの単位を付けた角度値で指定します。 開始位置と角度は省略可能ですが、その場合には初期値のtopになります。
また、グラデーションの開始色と終了色をカンマ（ , ）区切りで指定しますが、 さらにその中間に色を増やしてグラデーションの途中色を指定することもできます。
線形グラデーションのサンプル１
線形グラデーションのサンプル２
線形グラデーションのサンプル３
▼上記サンプルのスタイルシート記述例
p.linear-gradient_sample1 {
width:100%; height:50px;
background: -moz-linear-gradient(white, gray);
background: -webkit-gradient(linear, left top, left bottom, from(white), to(gray));
}
p.linear-gradient_sample2 {
width:100%; height:50px;
background: -moz-linear-gradient(left, #ff0000, rgba(255,0,0,0));
background: -webkit-gradient(linear, left top, right top, from(#ff0000), to(rgba(255,0,0,0)));
}
p.linear-gradient_sample3 {
width:100%; height:50px;
background: -moz-linear-gradient(left 45deg, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left top, right bottom, from(red), color-stop(0.2, orange), color-stop(0.3, yellow), color-stop(0.5, green), color-stop(0.7, blue), color-stop(0.8, indigo), to(violet));
}
radial-gradient()関数は、円形グラデーションを指定する際に使用します。
円形グラデーションは、グラデーションラインとそのラインに沿って配置される複数の色、 さらに、グラデーションの形状を定義することで作成されます。 radial-gradient()関数の書式は以下の通りです。
radial-gradient(開始位置と角度, 形状とサイズ, 開始色, 途中色, 終了色);
円形グラデーションのサンプル１
円形グラデーションのサンプル２
円形グラデーションのサンプル３
円形グラデーションのサンプル４
▼上記サンプルのスタイルシート記述例
p.radial-gradient_sample1 {
width:100%; height:50px;
background: -moz-radial-gradient(yellow, green);
background: -webkit-gradient(radial, center center, 20, center center, 100, from(yellow), to(green));
}
p.radial-gradient_sample2 {
width:100%; height:50px;
background: -moz-radial-gradient(bottom left, farthest-side, red, yellow, green);
background: -webkit-gradient(radial, left bottom, 0, left bottom, 300, from(red), color-stop(50%, yellow), to(green));
}
p.radial-gradient_sample3 {
width:100%; height:50px;
background: -moz-radial-gradient(top right, circle, red 50px, yellow 100px, rgba(255,255,255,0) 100px);
background: -webkit-gradient(radial, right top, 0, right top, 500, from(red), color-stop(20%, yellow), color-stop(20%, rgba(255,255,255,0)), to(rgba(255,255,255,0)));
}
p.radial-gradient_sample4 {
width:100%; height:50px;
background: -moz-radial-gradient(500px 10px, circle contain, red, yellow, green);
background: -webkit-gradient(radial, 500 10, 0, 500 10, 10, from(red), color-stop(50%, yellow), to(green));
}