标签：
要实现一个逼真的泡沫，涉及到比较复杂的光学/物理学知识。
我们这里先简化下问题，实现一个相对简单而足够实用的泡沫元素。
我们可以把基础的泡沫元素应用在很多场景中，比如水景、泡咖啡、啤酒甚至火焰特效中。
1 2 3 4 5 | .bubble { width: 200px; height: 200px; border-radius: 50%;} |
上面圆角边框半径等于50%，定义了一个圆形元素的样式。
泡沫应该是有色彩梯度的，这可以通过线性渐变（linear-gradient）和径向渐变（radial-gradient）属性来实现。
也可以通过框阴影（box-shadow）来实现，本例使用内外box-shadow来实现：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2), /* 淡灰色渐变背景，光源位于左上方 */ inset 0px 0px 5px rgba(0, 0, 0, .5), /* 泡沫内部深灰色边界 */ inset 0px 0px 55px rgba(255, 255, 255, .5), /* 泡沫内部白色渐变效果 */ inset -3px -3px 5px rgba(0, 0, 0, .5), /* 颜色稍深的右下边缘阴影效果 */ 0 0 50px rgba(255, 255, 255, .75); /* 泡沫周围的白色发光效果，以更好地突显边缘 */ |
通过添加上面的阴影，圆形元素现在已经有了不错的色彩渐变效果。看起来像是一个3D对象了。
在光源照射下，泡沫的局部往往会出现特别亮眼的效果。通过添加光斑可以使得泡沫更加逼真和有趣。
1 2 3 4 5 6 7 8 9 10 11 12 13 | .bubble:before { /* 在泡沫的左上角加上白色的亮点，形成光斑效果 */ content: ""; display: block; position: absolute; width: 50px; height: 50px; top: 25px; left: 25px; border-radius: 75px 25px; box-shadow: inset 10px 10px 50px rgba(255, 255, 255, .6);} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | .bubble:after { /* 使用:after伪元素构造泡沫内壁，形成薄薄的泡沫膜 */ content: ""; display: block; position: absolute; width: 190px; height: 190px; border-radius: 190px; left: 5px; top: 5px; box-shadow: inset 0px -5px 5px rgba(0, 0, 0, .05);} |
我们使用伪元素:after构造一个半径小5px的内圆，并加上一点近乎透明的暗色阴影。这样就形成若隐若现的泡沫膜壁效果。
你可以自己在线试试。
原文来自TECHBROOD.COM。
by iefreer
标签：
原文地址：http://blog.csdn.net/iefreer/article/details/51334139
