概述
今天小编跟大家讲解下有关CSS画心形的三种方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS画心形的三种方法 的相关资料，希望小伙伴们看了有所帮助。
下面 介绍三种CSS画心形的方法。实现过程都非常简单 保证你一看就会。
1.一颗div一颗心
用一个div画出一个心 核心的方法就是使用伪元素。
首先 我们在页面上先写出一个div：
使用CSS 将这个div变为一个橘红色的正方形：
div {
position:relative;
top: 100px;
left: 50%;
width: 100px;
height: 100px;
background-color: tomato;
}
接着我们利用元素的两个伪元素:before和:after 画出一个蓝色的圆和一个黄色的圆 并且将它们的圆心分别定位在正方形的上边和右边。
div:before {
content: "";
position:absolute;
top: -50px;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
}
div:after{
content: "";
position: absolute;
top: 0px;
left: 50px;
width: 100px;
height: 100px;
最后
以上就是孝顺大米为你收集整理的html css画爱心,科技常识：CSS画心形的三种方法爱无处不在...的全部内容，希望文章能够帮你解决html css画爱心,科技常识：CSS画心形的三种方法爱无处不在...所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复