快捷搜索: 长连接 前端 源码 pan

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% ;
}
    大功告成!看效果。。。
经验分享 程序员 微信小程序 职场和发展