ホームページ > 記事 > ウェブフロントエンド > CSS サークルを実装する 5 つの方法 (概要)
この記事では主に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 つの方法 (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。