ホームページ > 記事 > ウェブフロントエンド > CSSは赤いハートを描画します
CSSは赤いハートを描画します
- php中世界最好的语言オリジナル
- 2018-03-22 11:14:092460ブラウズ
今回は赤いハートを描くための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;
} この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 
推奨読書:
以上がCSSは赤いハートを描画しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。