爱心
先来说一下爱心的实现原理在用两个div改变宽高，还用到CSS3 border-radius 圆角属性,CSS3 transform 属性,把两个div按一定角度叠在一起就行形成了如上效果,爱心的角度是我在浏览器控制台手动调出来的，下面直接上代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱心效果</title>
<style>
*{
margin:0 ;
padding:0;/*清除默认样式*/
}
.right {
width: 80px;
height: 120px;
background-color: red;
transform: rotate(45deg);/* 顺时钟旋转45*/
border-radius: 45px 60px 0px 20px;/*设置圆角属性*/
margin-left: 53px;
}
.left {
width: 80px;
height: 120px;
background-color: red;
transform: rotate(-45deg); /* 定义 2D 旋转，逆时针旋转45*/
border-radius: 45px 60px 30px 0px;/*设置圆角属性*/
margin-bottom: -117px;/* 下外边距*/
margin-left: 21px;/* 用来移动元素*/
}
.love {
width: 150px; /*设置宽高*/
height: 150px;
background-color: rgba(49, 172, 185, 0.66);/*背景颜色*/
margin: 200px auto;/*外面的div居中*/
}
</style>
</head>
<body>
<div class="love">
<div class="left"></div>/*左边的div*/
<div class="right"></div>/*右边的div*/
</div>
</body>
</html>
下面介绍一下CSS3 border-radius 指定每个圆角
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
