ホームページ > 記事 > ウェブフロントエンド > CSS サークルを実装する 5 つの方法 (概要)

CSS サークルを実装する 5 つの方法 (概要)

青灯夜游オリジナル: 2018-10-11 15:53:053980ブラウズ

この記事では主にCSSサークルを実装する5つの方法(まとめ)を紹介していますので、困っている方は参考にしていただければ幸いです。

昨年のインターンシップ面接でインターンシップサークルについて聞かれたと思ったので、まとめ記事を書くことにしました！まとめると、方法は5つほどあります。

1. 2 つのタグのネスト:

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

.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. 前 / 後に疑似要素を使用します。

<p class="element2"></p>

.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:

<p class="element3"></p>

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

#4. border-shadowを使用します

<p class="element4"></p>

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

5.radial-gradient を使用します

<p class="element5">

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

他の方法がある場合は、教えてください。ありがとうございます。！！

要約: 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連チュートリアルの詳細については、

CSS ビデオチュートリアルをご覧ください。

CSS サークルを実装する 5 つの方法 (概要)

関連記事