• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > CSS3+HTML5 >  CSS3绘制一滴水正文

CSS3绘制一滴水

作者:网页模板
类型:图文教程
点击次数:
发布时间:2019-06-24 11:02
分享到:
先看下CSS3绘制一滴水的过程:



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

1、绘制一个正方形:
<div class="circle"></div>

.circle{
    width: 30px;
    height: 30px;
    background: red;
}
2、通过border-radio圆角来绘制雨滴的形状
.circle{
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 0px 18px 31px 18px;
}


3、通过transform的旋转rotate属性,旋转45°
.circle{
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 0px 18px 31px 18px;
    transform: rotate(45deg);
}


4、更改background,利用其渐变属性radial-gradient,添加径向渐变,具有高光效果
.circle{
    width: 30px;
    height: 30px;
    border-radius: 0px 18px 31px 18px;
    transform: rotate(45deg);
    background: radial-gradient(#f3eeee,#86cbffb5,#86cbff);
}


5、再通过box-shadow添加阴影,使其更具有立体感
.circle{
    width: 30px;
    height: 30px;
    border-radius: 0px 18px 31px 18px;
    transform: rotate(45deg);
    background: radial-gradient(#f3eeee,#86cbffb5,#86cbff);
    box-shadow:rgba(66,140,240,0.5) 0px 10px 16px;
}


    至此,一个雨滴画好了,怎么样,是不是非常简单。
(责任编辑:网页模板)
  • 本文标签:
  • CSS3绘制
这可能是最全的::before和::after伪元素的用法了
没有下一篇