😁 作者:Teddy (公众号:鸡仓故事汇)
⏰ 时间:2021-01-30 09:24:14
☁️ 天气:多云转晴
一、文件需求
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% ;
}
- 大功告成!看效果。。。
ok!到这里就大功告成,小编(Teddy)在这里先感谢大家的到来。
虽然不是太详细,小编已经很努力,给小编来个一键三连(点赞,关注,收藏),小编会越来越努力。。。