CSS の丸みを帯びた角 (border-radius) が完全に解決されました

Webページを制作する過程で、角を丸くしたい場合がありますが、これまでの方法では、複数の背景画像を使って画像を切り抜き（デザイン案をページ化しやすいように絵にカットする）、角を丸くする方法がありました。）。 CSS3 の出現後は、それほど面倒なことは必要ありません.CSS3 では、次のように、要素の角を丸くする効果を設定するための一連のプロパティが提供されています。

border-top-left-radius: 要素の左上隅に丸みを帯びた角効果を設定します。
border-top-right-radius: 要素の右上隅に丸みを帯びた角効果を設定します。
border-bottom-right-radius: 要素の右下隅の角丸効果を設定します。
border-bottom-left-radius: 要素の左下隅に丸みを帯びた角効果を設定します。
border-radius: 上記の 4 つの属性の省略形で、要素の 4 つの角に同時に角丸効果を設定できます。

上記の関数のオプションの値を以下の表に示します。

価値	説明
length	単位に値を追加して、丸みを帯びた角の形状を定義します
percentage	角を丸くする形状をパーセンテージで定義します

コンテンツ 非表示

1. border-*-radius

2. border-radius

3. 「CSS の丸みを帯びた角 (border-radius) が完全に解決されました」についてわかりやすく解説！絶対に観るべきベスト2動画

border-*-radius

上記の導入により, 一連の border-*-radius 関数が要素の 4 つの角にそれぞれ丸みを帯びた角の効果を設定できることがわかります. 関数の構文形式は次のとおりです:

border-*-radius：[ <length> | <percentage> ]{1,2}

構文の意味は、border-*-radius 属性に 1~2 個のパラメーターを指定し、スペースを使用してパラメーターを区切る必要があるということです。第 1 パラメータはフィレットの水平方向の半径または半軸を示し、第 2 パラメータはフィレットの垂直方向の半径または半軸を示します。第 2 パラメータを省略すると、第 1 パラメータの値がそのまま使用されます。 .

[例] 4 つの border-*-radius 属性を使用して、要素の角を丸くする効果を設定します。

 <!DOCTYPE html>
<html lang="ja">
<head>
    <style>
        div {
            width: 350px;
            height: 100px;
            padding: 15px 0px 0px 25px;
        }
        .one {
            border-top-left-radius: 2em 0.5em;
            border-top-right-radius: 1em 3em;
            border-bottom-right-radius: 4em 0.5em;
            border-bottom-left-radius: 1em 3em;
            background-color: #CCC;
            margin-bottom: 10px;
        }
        .two {
            border-top-left-radius: 2em;
            border-top-right-radius: 2em;
            border-bottom-right-radius: 2em;
            border-bottom-left-radius: 2em;
            background-color: #888;
        }
    </style>   
</head>
<body>
    <div class="one">
        border-top-left-radius: 2em 0.5em;<br>
        border-top-right-radius: 1em 3em;<br>
        border-bottom-right-radius: 4em 0.5em;<br>
        border-bottom-left-radius: 1em 3em;
    </div>
    <div class="two">
        border-top-left-radius:2em;<br>
        border-top-right-radius:2em;<br>
        border-bottom-right-radius:2em;<br>
        border-bottom-left-radius:2em;
    </div>
</body>
</html>

実行結果は次の図のとおりです。

border-radius

border-radius 属性は、border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius の 4 つの属性の省略形であり、設定できます。同時に border-radius を使用 4 つの border-*-radius 属性。 border-radius プロパティの形式は次のとおりです。

border-radius：[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

構文は次のように説明されています。

border-radius 属性は、スラッシュ/で区切られた 2 つのパラメーターセットを受け取ることができます。各パラメーターセットには、1 ～ 4 個のパラメーター値を設定できます。最初のパラメーターセットは、半径または半軸を表します。フィレットの水平方向. パラメータの 2 番目のグループは, フィレットの垂直方向の半径または半軸を表します. パラメータの 2 番目のグループの値を省略すると, パラメータの 1 番目のグループの値が直接使用されます.このグループのパラメータに対して。
パラメーターの最初のグループでは、4 つのパラメーターがすべて指定されている場合、要素の 4 つのコーナーは、左上、左上、右上、右上、右下、右下の順に適用されます。 -left bottom-left; 3 つのパラメーターが指定されている場合、最初のパラメーターは要素の左上隅に作用し、2 番目のパラメーターは要素の右上隅と左下隅に作用し、3 番目のパラメーターは要素の左上隅に作用します。要素の右下隅の右下に作用します。2 つのパラメータが指定されている場合、最初のパラメータは要素の左上隅の左上と右下に作用し、2 番目のパラメータは要素の左上隅に作用します。 – 要素の右上隅の右と左下隅の左下; パラメータが 1 つだけ指定されている場合、パラメータは要素の 4 つの隅に同時に作用します。
パラメーターの 2 番目のグループも、パラメーターの最初のグループの規則に従いますが、アクションの方向は異なります。

[例] border-radius 属性を使用して、要素の角を丸くする効果を設定します。

 <!DOCTYPE html>
<html>
<head>
    <style>
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
        margin: 10px 0 0 10px;
        padding: 10px;
        width: 200px;
        float: left;
        background: #bbb;
    }
    h2 {
        clear: left;
    }
    .test .one {
        border-radius: 10px;
    }
    .test .two {
        border-radius: 10px 20px;
    }
    .test .three {
        border-radius: 10px 20px 30px;
    }
    .test .four {
        border-radius: 10px 20px 30px 40px;
    }
    .test2 .one {
        border-radius: 10px/5px;
    }
    .test2 .two {
        border-radius: 10px 20px/5px 10px;
    }
    .test2 .three {
        border-radius: 10px 20px 30px/5px 10px 15px;
    }
    .test2 .four {
        border-radius: 10px 20px 30px 40px/5px 10px 15px 20px;
    }
    </style>
</head>
<body>
    <h2>水平と垂直の半径が同じ場合：</h2>
    <ul class="test">
        <li class="one">1つのパラメータを提供<br>border-radius:10px;</li>
        <li class="two">2つのパラメータを提供<br>border-radius:10px 20px;</li>
        <li class="three">3つのパラメータを提供<br>border-radius:10px 20px 30px;</li>
        <li class="four">4つのパラメータを提供<br>border-radius:10px 20px 30px 40px;</li>
    </ul>
    <h2>水平と垂直の半径が異なる場合：</h2>
    <ul class="test2">
        <li class="one">1つのパラメータを提供<br>border-radius:10px/5px;</li>
        <li class="two">2つのパラメータを提供<br>border-radius:10px 20px/5px 10px;</li>
        <li class="three">3つのパラメータを提供<br>border-radius:10px 20px 30px/5px 10px 15px;</li>
        <li class="four">4つのパラメータを提供<br>border-radius:10px 20px 30px 40px/5px 10px 15px 20px;</li>
    </ul>
</body>
</html>

実行結果は次の図のとおりです。

「CSS の丸みを帯びた角 (border-radius) が完全に解決されました」についてわかりやすく解説！絶対に観るべきベスト2動画

CSS Border

Css border-radius and border#html #css #programming #youtube