CSS3 の角丸入門

CSS3の角丸の利点

従来の角丸生成スキームでは、背景パターンとして複数の画像を使用する必要があります。 CSS3 の登場により、これらの画像の作成に時間を無駄にする必要がなくなり、他にも多くの利点があります:

* メンテナンスの負荷を軽減します。画像ファイルの生成、更新、Web ページのコードの記述といった作業はもう必要ありません。

* ウェブページのパフォーマンスを向上させます。不要な HTTP リクエストがなくなるため、Web ページの読み込みが速くなります。

*視覚的な信頼性を高めます。特定の状況 (ネットワークの混雑、サーバーエラー、ネットワーク速度の遅さなど) では、背景画像のダウンロードに失敗し、視覚効果が低下することがあります。 CSS3ではこのようなことは起こりません。

CSS3 border-radius プロパティ

基本構文:

border-radius: none | {1,4} [/ {1,4} ]?

値の範囲:

<length>: 浮動小数点数とユニット識別子で構成される長さの値。負の値は指定できません。

簡単な説明:

border-radiusは省略法です。「/」の前後の値が両方存在する場合、「/」の前の値が水平方向の半径を設定し、「/」の後の値が垂直方向の半径を設定します。「/」がなければ、水平半径と垂直半径は等しくなります。また、その 4 つの値は、左上、右上、右下、左下の順に設定されます。主に次の状況が発生します:

1. 値が 1 つだけあり、次に上。 -left、右上、右下、左下の 4 つの値が等しい。

2. 2 つの値があり、top-left はbottom-right に等しく、最初の値を受け取り、top-right はbottom-left に等しく、2 番目の値を受け取ります

3. 3 つの値があります。このうち、最初の値は左上に設定され、2 番目の値は右上と左下に設定され、それらは等しくなります。3 番目の値は右下に設定されます。

4. 4つの値があり、最初の値は左上に設定すること、2番目の値は右上に設定すること、3番目の値は右下に設定すること、4番目の値は左下に設定することです。

の値は 1 つだけです:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(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中文网(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中文网(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中文网(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 属性をサポートします。

現在、互換性を確保するには、-moz-border-radius と border-radius を同時に設定するだけで済みます。

-moz-border-radius: 15px;
border-radius: 15px;

(注: border-radius は最後に宣言する必要があります。宣言しないと無効になる可能性があります。)

すべての主要なブラウザーは border-radius をサポートしていますが、実装はいくつかの詳細で異なります。四隅の色、幅、スタイル（実線枠、点線枠など）、単位が同じ場合は、四隅の設定が異なるとどのブラウザでも基本的に同じ描画結果になります。大きな違いがあります。

すべてのブラウザが角の半径をパーセンテージ値として設定することをサポートしているわけではありません。現時点で最も安全なアプローチは、各丸い境界線のスタイルと幅を同じ値に設定し、パーセンテージ値の使用を避けることです。

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style type="text/css"> div { width: 200px; height: 100px; border: 2px solid #f36; border-color: red green blue orange; border-width: 15px 30px 30px 80px; border-radius: 50px; background: #ccc; } </style> </head> <body> <div> </div> </body> </html>

提出するリセットコード

自動運転