css样式border-radius学习-画出水滴
一、文件需求
1. 创建一个html页面
二、 实现
-
创建html网页 写出5个div 分别为：
<body> <h1>玩转border-radius，带你画图</h1> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <div class="div5"></div> </body>
-
下面开始写css样式：
body {
text-align: center;
margin-top: 10%;
}
div {
display: inline-block;
width: 3.75rem;
height: 3.75rem;
margin-left: 2%;
background-image: -webkit-linear-gradient(bottom, lightblue, lightcoral, rgb(48, 12, 231));
}
.div1 {
border-radius:48% 53% 51% 49% / 42% 56% 0% 56% ;
}
.div2 {
border-radius:48% 53% 51% 2% / 56% 55% 0% 43% ;
}
.div3 {
border-radius:100% 0% 51% 48% / 57% 0% 100% 43% ;
}
.div4 {
border-radius:32% 0% 100% 100% / 1% 100% 100% 100% ;
}
.div5 {
border-radius:41% 58% 0% 100% / 45% 100% 0% 61% ;
}
-
大功告成！看效果。。。
上一篇：
多线程四大经典案例