はじめに
この実験では、HTML 要素をスタイリッシュにするためのさまざまな技術を練習することで CSS プログラミングを探求します。実践的な演習を通じて、セレクター、プロパティ、値をどのように使用するかを学び、視覚的に魅力的な Web ページを作成します。この実験が終わるとき、あなたは CSS をしっかりと理解し、独自の Web 開発プロジェクトに適用できるようになります。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 89%です。学習者から 100% の好評価を得ています。
円
VM 内には既にindex.htmlとstyle.cssが用意されています。
CSS のみを使用して円形を作成するには、要素の境界を曲げるためにborder-radius: 50%プロパティを使用します。完全な円を保証するために、widthとheightの両方を同じ値に設定することを確認してください。異なる値を使用する場合、代わりに楕円が作成されます。以下はコードの例です：
<div class="circle"></div>
.circle {
border-radius: 50%;
width: 32px;
height: 32px;
background: #9c27b0;
}
右下隅の「Go Live」をクリックして、ポート 8080 で Web サービスを実行してください。その後、Web 8080タブを更新して Web ページをプレビューできます。
まとめ
おめでとうございます！あなたは円の実験を完了しました。あなたの技術を向上させるために、LabEx でさらに多くの実験を練習することができます。