CSS3 | 用CSS3绘制一个小水滴
Posted 酷学编程
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 | 用CSS3绘制一个小水滴相关的知识，希望对你有一定的参考价值。
今天我们来学习一个超简单的小雨滴！还没有学会的小伙伴们快来get这项技能吧~
第一步
通过border-radio边框弧度来绘制雨滴的形状：
.circle{
width: 30px;
height: 30px;
background: red;
border-radius: 0px 18px 31px 18px;
}
第二步
通过transform的旋转rotate属性，使其渲染45°
.circle{
width: 30px;
height: 30px;
background: red;
border-radius: 0px 18px 31px 18px;
transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);
}
第三步
重新配色，通过background渐变属性radial-gradient,添加渐变，具有高光效果
.circle{
width: 30px;
height: 30px;
background: red;
border-radius: 0px 18px 31px 18px;transform: rotate(45deg); -webkit-
transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);
background: radial-gradient(#f3eeee,#86cbffb5,#86cbff);
}
第四步
上面的效果是不是没有什么立体感，我们添加一点点阴影效果，增加立体感。box-shadow添加阴影。
.circle{
width: 30px;
height: 30px;
background: red;
border-radius: 0px 18px 31px 18px;
transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);
background: radial-gradient(#f3eeee,#86cbffb5,#86cbff);
-webkit-box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;
}
以上就是完成一个小水滴的步骤了，是不是超简单啊，这么简单还不快点get起来！说不定就用到了呢~
我们的文章到这里就结束了~ 如果你还有其它的疑问欢迎在我们的文章下方留言哦！
-END-
观看更加系统化的直播课程
领取更多前端相关开发资料
可以扫描下方二维码
加苏莱小姐姐的微信即可领取
以上是关于CSS3 | 用CSS3绘制一个小水滴的主要内容，如果未能解决你的问题，请参考以下文章