今回は赤いハートを描くためのCSSをお届けします。CSSで赤いハートを描くための注意点は何ですか?実際の事例を見てみましょう。
ステップ 1:
まず正方形を描きます。図に示すように:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css画桃心</title> <style media="screen"> .heart-body { width: 500px; margin: 100px auto; position: relative; } .heart-shape { position: relative; width: 100px; height: 100px; background-color: #f70e0e; } </style> </head> <body> <p class="heart-body"> <p class="heart-shape"></p> </p> </body> </html>
ステップ 2:
は before と :after の疑似要素を使用して、正方形の左側と上部に正方形を描画し、次に border-radius を使用します。 : 50%; 属性を変更し、図に示すように 2 つの円を取得します。
.heart-shape:before, .heart-shape:after { position: absolute; content: ''; width: 100px; height: 100px; background-color: #ffc0cb; } .heart-shape:before { left: -45px; } .heart-shape:after { top: -45px; }
Use border-radius: 50%; ステップ 3:
クラス名は、heart-shape pです。図に示すように、transform:rotate(45deg); 属性を使用して、円の背景色を変更します。次に、Xiaoying が背景色を統一色に設定すると、次のように最終的な愛が生まれました。写真内:
.heart-shape:before, .heart-shape:after { position: absolute; content: ''; width: 100px; height: 100px; -webkit-border-radius: 50%; /**兼容苹果;谷歌,等一些浏览器认*/ -moz-border-radius: 50%; /**兼容火狐浏览器*/ -o-border-radius: 50%; /**兼容opera浏览器*/ border-radius: 50%; background-color: #ffc0cb; }
推奨読書:
css3マルチクラスセレクターの使用の詳細な説明 CSSでのbackground-attachmentの使用の詳細な説明以上がCSSは赤いハートを描画しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。