CSSを使用してリング効果を実現する方法

CSS でリング効果を実現する方法はたくさんあります。ここでは 5 つの方法を紹介します:

(推奨チュートリアル: CSSチュートリアル）

まず、導入効果を見てみましょう:

次に、方法を紹介します:

1. 2 つのタグのネスト

<div class="element1">
    <div class="child1"></div>
</div>

.element1{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .child1{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

2. 前後に擬似要素を使用します

<div class="element2"></div>

.element2{
            width: 200px;
            height: 200px;
            background-color: lightpink;
            border-radius: 50%;
        }
        .element2:after{
            content: "";
            display: block;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #009966;
            position: relative;
            top: 50px;
            left: 50px;
        }

3. border:

<div class="element3"></div>

 .element3{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            border: 50px solid lightpink ;
        }

を使用します (学習ビデオの推奨事項: css ビデオ チュートリアル）

4. border-shadow を使用します

<div class="element4"></div>

.element4{
            width: 100px;
            height: 100px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink ;
            margin: auto;
        }

<div class="element5">

  .element5{
            width: 200px;
            height: 200px;
            background-color: #009966;
            border-radius: 50%;
            box-shadow: 0 0 0 50px lightpink inset;
            margin: auto;
        }

5. Radial-gradient を使用します

<div class="element6"></div>

.element6{
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
        }

以上がCSSを使用してリング効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。