CSS3 の border-radius プロパティを使用して一般的なグラフィックを作成する

CSS3 には多くの新しい属性が追加されており、その中には非常に実用的な属性も含まれており、作業効率が向上するだけでなく、ページの見栄えも良くなります。たとえば、CSS3 の border-radius プロパティを 使用すると、一般的に使用されるグラフィックを描画できるため、アーティストの負担が軽減されます。この記事では、border-radius 属性を使用して正円、半円、扇形、円弧 を作成する方法を説明します。興味のあるお友達はぜひ見てみてください、お役に立てれば幸いです。

1. border-radius を使用して完全な円を作成します。

border-radius 属性の 4 つの値は、左上隅、右上隅、右下隅、左下隅、値が 1 つだけ設定されている場合は、4 つの隅が同じサイズであることを意味します。円を描画するときは、4 隅の値を div の長さの半分に設定するだけです。div の長さと幅は両方とも 200px、4 隅の値は 50% (ここでは 100px) です。 ）。コードは次のとおりです:

div{
    width: 200px;
    height: 200px;
    background: orangered;
    border-radius: 50%;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

レンダリング:

2. border-radius を使用して半円を作成します

半円 左上角と右上角は丸角、右下角と左下角は直角です。左上隅と右上隅の値を div の長さの半分に設定し、右下隅と左下隅の値を 0 のままにして、高さの値を半分に設定します。元の高さを標準の半円にします。コードは次のとおりです:

div{
    width: 200px;
    height: 100px;
    background: red;
    border-radius: 100px 100px 0 0;
    line-height: 100px;
    text-align: center;
    font-size: 40px;
    }

レンダリング:

3. border-radius を使用して扇形 ## を作成します。

# 扇型のもの 左上の角が丸く、他の3つの角が直角になっています。左上隅の値を幅と高さと同じ値に設定し、他の 3 つの隅の値は変更しない (0 に等しい) ままにしておきます。コードは次のとおりです:

div{
    width: 200px;
    height: 200px;
    background: red;
    border-radius: 200px 0 0;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
   }

レンダリング:

4. border-radius を使用して円弧を作成します

円弧 その 2 つの対向する角度は変化しますが、他の 2 つの対向する角度は変化しません。左上隅と右下隅を幅と高さと同じ値に設定し、右上隅と左下隅は変更しない (0 に等しい) ままにします。また、変形属性を追加して、平坦な円弧に回転させます。コードは次のとおりです:

div{
    width: 200px;
    height: 200px;
    background: red;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
    border-radius: 200px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
   }

レンダリング:

上記では、CSS3 の border-radius 属性の実践的なスキルをいくつか紹介しています。ページをレイアウトして、いくつかの簡単なグラフィックを描画します。興味のある友人は、他の見栄えの良い効果を作成できるかどうかを確認してください。

以上がCSS3 の border-radius プロパティを使用して一般的なグラフィックを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。