CSS3 の角丸入門
CSS3の角丸の利點(diǎn)
従來の角丸生成スキームでは、背景パターンとして複數(shù)の畫像を使用する必要があります。 CSS3 の登場により、これらの畫像の作成に時間を無駄にする必要がなくなり、他にも多くの利點(diǎn)があります:
* メンテナンスの負(fù)荷を軽減します。畫像ファイルの生成、更新、Web ページのコードの記述といった作業(yè)はもう必要ありません。
* ウェブページのパフォーマンスを向上させます。不要な HTTP リクエストがなくなるため、Web ページの読み込みが速くなります。
*視覚的な信頼性を高めます。特定の狀況 (ネットワークの混雑、サーバー エラー、ネットワーク速度の遅さなど) では、背景畫像のダウンロードに失敗し、視覚効果が低下することがあります。 CSS3ではこのようなことは起こりません。
CSS3 border-radius プロパティ
基本構(gòu)文:
border-radius: none |
値の範(fàn)囲:
<length>: 浮動小數(shù)點(diǎn)數(shù)とユニット識別子で構(gòu)成される長さの値。負(fù)の値は指定できません。
簡単な説明:
border-radiusは省略法です。 「/」の前後の値が両方存在する場合、「/」の前の値が水平方向の半徑を設(shè)定し、「/」の後の値が垂直方向の半徑を設(shè)定します。 「/」がなければ、水平半徑と垂直半徑は等しくなります。また、その 4 つの値は、左上、右上、右下、左下の順に設(shè)定されます。主に次の狀況が発生します:
1. 値が 1 つだけあり、次に上。 -left、右上、右下、左下の 4 つの値が等しい。
2. 2 つの値があり、top-left はbottom-right に等しく、最初の値を受け取り、top-right はbottom-left に等しく、2 番目の値を受け取ります
3. 3 つの値があります。このうち、最初の値は左上に設(shè)定され、2 番目の値は右上と左下に設(shè)定され、それらは等しくなります。3 番目の値は右下に設(shè)定されます。
4. 4つの値があり、最初の値は左上に設(shè)定すること、2番目の値は右上に設(shè)定すること、3番目の値は右下に設(shè)定すること、4番目の値は左下に設(shè)定することです。
の値は 1 つだけです:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>の値は 2 つあります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>の値は 3 つあります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>の値は 4 つあります:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width: 150px;
height: 80px;
border: 2px solid #f36;
border-radius: 30px 20px 0 40px;
background: #ccc;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>ブラウザのサポート
IE 9、Opera 10.5、Safari 5、Chrome 4および Firefox 4 は両方とも、上記の border-radius 屬性をサポートしています。 Safari と Chrome の初期バージョンは -webkit-border-radius 屬性をサポートし、Firefox の初期バージョンは -moz-border-radius 屬性をサポートします。
現(xiàn)在、互換性を確保するには、-moz-border-radius と border-radius を同時に設(shè)定するだけで済みます。
-moz-border-radius: 15px;
border-radius: 15px;
(注: border-radius は最後に宣言する必要があります。宣言しないと無効になる可能性があります。)
すべての主要なブラウザーは border-radius をサポートしていますが、実裝はいくつかの詳細(xì)で異なります。四隅の色、幅、スタイル（実線枠、點(diǎn)線枠など）、単位が同じ場合は、四隅の設(shè)定が異なるとどのブラウザでも基本的に同じ描畫結(jié)果になります。大きな違いがあります。
すべてのブラウザが角の半徑をパーセンテージ値として設(shè)定することをサポートしているわけではありません。現(xiàn)時點(diǎn)で最も安全なアプローチは、各丸い境界線のスタイルと幅を同じ値に設(shè)定し、パーセンテージ値の使用を避けることです。
