CSS3绘制一滴水_CSS3+HTML5_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

CSS3绘制一滴水

来源：未知作者：类型：图文教程点击次数：发布时间：2019-06-24 11:02:00

先看下CSS3绘制一滴水的过程：

从一个正方形到一滴水，就这几步。下面开始实现：

1、绘制一个正方形：

1<div class="circle"></div>
2 
3.circle{
4    width: 30px;
5    height: 30px;
6    background: red;
7}

2、通过border-radio圆角来绘制雨滴的形状

1.circle{
2    width: 30px;
3    height: 30px;
4    background: red;
5    border-radius: 0px 18px 31px 18px;
6}

3、通过transform的旋转rotate属性，旋转45°

1.circle{
2    width: 30px;
3    height: 30px;
4    background: red;
5    border-radius: 0px 18px 31px 18px;
6    transform: rotate(45deg);
7}

4、更改background，利用其渐变属性radial-gradient,添加径向渐变，具有高光效果

1.circle{
2    width: 30px;
3    height: 30px;
4    border-radius: 0px 18px 31px 18px;
5    transform: rotate(45deg);
6    background: radial-gradient(#f3eeee,#86cbffb5,#86cbff);
7}

5、再通过box-shadow添加阴影，使其更具有立体感

1.circle{
2    width: 30px;
3    height: 30px;
4    border-radius: 0px 18px 31px 18px;
5    transform: rotate(45deg);
6    background: radial-gradient(#f3eeee,#86cbffb5,#86cbff);
7    box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;
8}

至此，一个雨滴画好了，怎么样，是不是非常简单。