css样式border-radius学习-画出⽔滴
 作者：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%;
border radius什么意思}
.div5 {
border-radius:41%58%0%100%/45%100%0%61%;
}
⼤功告成！看效果。。。
ok！到这⾥就⼤功告成，⼩编（Teddy）在这⾥先感谢⼤家的到来。
虽然不是太详细，⼩编已经很努⼒，给⼩编来个⼀键三连(点赞，关注，收藏)，⼩编会越来越努⼒。。。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。