持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
夏季来了，最受欢迎的水果当然是西瓜了！那么问题来了，你会用css画西瓜吗？看官别急，我们先回顾下西瓜长啥样：
不知道有没有火星来的小伙伴没见过西瓜，有的话在留言区评论，我往火星寄点西瓜过去~
半个西瓜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
.watermelon {
width: 300px;
height: 300px;
border-radius: 150px;
background-image: radial-gradient(red, yellow , green );
}
</style>
</head>
<body>
<div class="watermelon">
</div>
</body>
</html>
这西瓜皮有点厚？
多点瓜少点皮
.watermelon {
width: 300px;
height: 300px;
border-radius: 150px;
background-image: radial-gradient(red 50%, yellow 60%, green 70%);
}
哇塞，有点意思了，不过眼尖的同学可能有疑问了，为啥上边的颜色值后面的百分比是50%， 60%, 70%而不是80%， 90%， 100%？？？这个问题问的好。其实啊，我们把border-radius去掉就明白了：
.watermelon {
width: 300px;
height: 300px;
/* border-radius: 150px; */
background-image: radial-gradient(red 50%, yellow 60%, green 70%);
}
.watermelon {
width: 300px;
height: 300px;
/* border-radius: 150px; */
background-image: radial-gradient(red 80%, yellow 90%, green 100%);
}
看到了吧，其实啊，径向渐变有个参数是控制到底是以边为界还是以角为界，具体可以看我之前写的文章 悟了悟了，妈妈再也不用担心我不会background-image之径向渐变篇
换成更真实的颜色
.watermelon {
width: 300px;
height: 300px;
border-radius: 150px;
background-image: radial-gradient(rgb(227, 108, 99) 50%, rgb(219, 220, 193) 60% , rgb(96, 148, 91) 70% );
}
加上西瓜籽
.guazi {
position: absolute;
width: 10px;
height: 8px;
border-radius: 5px;
background-color: #000;
}
const watermelon = document.querySelector('.watermelon');
for(let i = 0; i < 30; i++) {
let guazi = document.createElement('div');
guazi.classList.add('guazi');
guazi.style.top = 50 + Math.random() * 160 + 'px';
guazi.style.left = 50 + Math.random() * 160 + 'px';
watermelon.appendChild(guazi);
}
码上掘金
可以在码上掘金直接看效果啊 code.juejin.cn/pen/7103899…
喜欢的欢迎点赞关注！咱们明天见~
