介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,,,& lt; meta charset=皍tf-8"比;
,,,& lt; title> css画桃心& lt;/title>
,,,& lt; style 媒体=皊creen"比;
,,,,,,,.heart-body {
,,,,,,,,,,,宽度:,500 px;
,,,,,,,,,,,保证金:,100 px 汽车;
,,,,,,,,,,,位置:,相对;
,,,,,,,}
,,,,,,,.heart-shape {
,,,,,,,,,,,位置:,相对;
,,,,,,,,,,,宽度:,100 px;
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,背景颜色:,# f70e0e;
,,,,,,,}
,,,& lt;/style>
& lt;/head>
& lt; body>
,,,& lt; div 类=癶eart-body"比;
,,,,,,,& lt; div 类=癶eart-shape"祝辞& lt;/div>
,,,& lt;/div>
& lt;/body>
& lt;/html> .heart-shape:之前,
,,,,,,,.heart-shape: after {
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,,,,,宽度:,100 px;
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,背景颜色:,# ffc0cb;
,,,,,,,}
,,,,,,,.heart-shape: before {
,,,,,,,,,,,左:,-45 px;
,,,,,,,}
,,,,,,,.heart-shape: after {
,,,,,,,,,,,:,-45 px;
,,,,,,,} .heart-shape:之前,
,,,,,,,.heart-shape: after {
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,内容:,& # 39;& # 39;;
,,,,,,,,,,,宽度:,100 px;
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,-webkit-border-radius:, 50%;
,,,,,,,,,,,/* *兼容苹果;谷歌,等一些浏览器认*/,,,,,,,,,,,-moz-border-radius:, 50%;
,,,,,,,,,,,/* *兼容火狐浏览器*/,,,,,,,,,,,-o-border-radius:, 50%;
,,,,,,,,,,,/* *兼容歌剧浏览器*/,,,,,,,,,,,这个特性:,50%;
,,,,,,,,,,,背景颜色:,# ffc0cb;
,,,,,,,} .heart-shape {
,,,,,,,,,,,位置:,相对;
,,,,,,,,,,,宽度:,100 px;
,,,,,,,,,,,身高:,100 px;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章给大家分享的是有关怎么使用CSS画的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
今天小颖给大家分享一个用CSS画的爱的心,底下有代码和制作过程,希望对大家有所帮助。
<强>
先画一个正方形。如图:
<强>
将利用伪元素和前:之后,在正方形的左边和上边各画一个正方形,然后再利用border - radius: 50%;属性,修饰下这两个正方形,然后就得到了两个圆,如图所示:
利用border - radius: 50%;属性:
<强>
类名为:心形的div利用变换:旋转(45度);属性将他们旋转45度,如图所示:
