求css3 高手 帮画一个水滴图型 如图

html-css016

求css3 高手 帮画一个水滴图型 如图,第1张

<html>

<body>

<style type="text/css"> 

 

 span{height:40px width:40px display:block position:relative} 

.demoSpan1{width:26px}

.demoSpan1:before{content:'' height:16px width:16px border:5px solid #333 display:block position:absolute top:2px left:0px z-index:1 line-height:26px border-radius:40px-webkit-border-radius:40px-moz-border-radius:40px color:#fff text-align:center}

.demoSpan1:after{content:'' height:0px width:0px display:block position:absolute bottom:2px left:3px border:10px transparent solid border-top-color:#333 border-width:15px 10px 0px 10px }

</style>

<span class="demoSpan1">

</span>

</body>

</html>

这个是中间空心的，你自己略加修改。

给你个便捷的CSS3图标网站，那里有很多责成的。

这里不给发网址，下面的东东，自己参吧：

www-uiplayground-in/css3-icons

楼主是要什么水滴效果啊 要是比较简单的可以直接去下载一些水滴笔刷 都是现成的下面是从别人那摘的 你参考下吧光点和水滴的体积感。点击选择Bevel and Emboss（斜面和浮雕）选项，并进入Bevel and Emboss（斜面和浮雕）样式设置面板，将Style（样式）设置为Inner Bevel（内斜面），将 Technique（方法）设置为Chisel Hard（雕刻清晰），Depth（深度）为250， Size（大小）设置为5（深度和大小决定了水滴的立体高度和高光区的位置，读者可以根据实际需要调整相应数值），Soften（软化）设置为4。在Shading（阴影）选项栏中，将高光模式和阴影模式的颜色均改为白色（读者可以根据背景图象的颜色或不同环境设置不同颜色，该颜色主要决定高光的色相），并将阴影模式改为Color Dodge（颜色减淡）模式，并将Opacity（不透明度）设置为37%，其它参数仍使用默认值 7. 全部设置完成后按下OK按钮确定，怎么样，水滴的效果是不是已经出来了，呵呵。晶莹剔透！ 通过添加以上几种图层样式，就制作出了水滴的光影效果。但此时的水滴效果仍然不够逼真，因为水是流体，形态变化万千。可以通过Liquify（液化）功能或者橡皮擦来修改水滴的形状。通过复制或直接在该图层中绘制，以制作出更多形态各异的水滴 小结：图层样式的具体参数很多，更多的参数设置和具体材质表现读者可以在实践中进一步去研究。 图层样式还可保存以留作后用。进入Style（样式）工作面板，当鼠标移动到面板中空白处时，将出现一个小油漆桶图标， 点击鼠标左键，将弹出一个新建样式的对话框（或者点击面板下的Add new layer（增加新图层）按钮也可弹出该对话框），将名称改为“水滴”， 设置完成后按下OK按钮，就可以把设置好的图层样式保存在样式面板中，以后在制作类似效果的时候，只要在样式面板中点击这个新样式图标，将此图层样式应用到图层，即可实现水滴的效果了。参考资料： http://www.xfbbs.com/ArticleShow/61/Article_Show_52964.html