css水滴样式,水滴设计元素

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

如何给照片加上水滴效果

在Photoshop里面做

1. 打开你的照片。

2. 用圆形或者椭圆选框工具在图片上选择一个大小合适的区域，按下快捷键“Ctrl+J”，把区域复制到新的图层中。在新的图层中，运用旋转工具将区域旋转一定的角度。

3. 点击菜单“滤镜→扭曲→球面化”对新的图层进行处理，数量设置为60%。

4. 在新图层上点击右键，选择“混合选项”。使用“投影”样式，设置不透明度为75%、角度为30°、距离1像素、扩展0%，大小为1像素。再使用“内阴影”样式，设置不透明度为95%、角度为30°、距离为1像素、阻塞0%，大小2像素。设置完成后，点击“好”，回到新图层中，就可以初见水珠之影了。

5. 为了让水珠更加逼真，我们还得对水珠做光照产生的反光处理。用椭圆选框工具在水珠上半部分选择一扁小的椭圆区域，并用渐变工具进行从上到下的填充，颜色变化为白色到透明。再在水珠下半部分同样选择一扁小的椭圆区域，用相同的渐变色对其进行由下至上的填充。

到这就完成了水珠效果的制作，你可以用同样的办法制作更多角度不同的水珠，会有更好的效果哦！

相关问答

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

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

Q2: css里添加声音

css 添加声音至少在现在的情况下是不合适的。

因为各个浏览器对css标准的支持不一样，实现也不一样，使用这种方法难度大，风险大，也不容易维护。