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