Div+CSS教程：如何制作玻璃瓶注水效果

1
2
3
4
5

.water{
background:-moz-linear-gradient(-85deg,rgba(0,204,255,0.35),rgba(0,173,216,0.55) 70%,rgba(0,173,216,0.4));
-moz-border-radius:50px 50px 20px 20px/8px 8px 10px 10px;
-moz-box-shadow:0px 0px 6px rgba(0,204,255,0.5) inset,0px 0.2px 3px -1px rgba(0,0,0,0.3) inset,0px 2px 6px -1px rgba(0,0,0,0.1) inset,0px 2px 5px rgba(0,204,255,0.3),0px 1px 3px rgba(0,204,255,0.2);
}

    水元素边角需要做一个椭圆化处理，因为这次需要用到背景色打底，上圆润一点圆角过渡自然下扁在两角有一个小拐点，因为上面的是水平面透视的，而下面是玻璃底座，需要有一定的硬度，与上面产生区别；
背景色拉一个左上右下，斜度平缓倾向于垂直的渐变，颜色由深到浅，投影所产生的效果跟瓶身的效果差不多，颜色在左右侧深中间浅；

水平面

1
2
3
4
5
6
7

.water:after{
background:-moz-linear-gradient(left,rgba(255,255,255,0.4),rgba(0,204,255,0.05) 50%,rgba(0,204,255,0.1) 80%,rgba(255,255,255,0.3));
-moz-border-radius:50px/8px;
border:1px solid rgba(255,255,255,0.2);
border-bottom-color:rgba(255,255,255,0.4);
-moz-box-shadow:0px 1px 2px -1px rgba(0,204,255,0.35);
}

    背景色拉一个由左到右 白-蓝-蓝-白的渐变，因为已经有水主体的蓝色打底色，所以上水平面颜色不用太重，边框用0.2白色，而在前面的border-bottom则用0.4白 色，远模糊近清晰，让立体感更强些…这里值得注意的是投影，我写了一个向下偏移1像素，羽化2像素，然后缩小1个比例，颜色为0.35的蓝色投影，这 个是为了跟上面的水主体呼应写的，我们知道，在中学上化学课目测试管中溶液体积的时候，视线要要跟溶液凹面相平，否则会产生误差，可以看这张图：

    内径比较小的仪器，当里面装有水时，因为水有表面张力，所以在小内径仪器里不会是平的，呈现周围高中间低的凹形，而中间的凹形状才是真正水的标准位置，周围的只是因为表面张力往上高了；所以我刚才做的那个投影，配合背景色的头尾白色，就形成了这个凹面的效果，放大200%后，效果如下：

    after做的是下面箭头指向的稍微深色的投影区域，而上面箭头指向的，其实就是水water本体所做的内投影，现在明白为什么这次主体要做圆角伸到最上面了；

水底部

    其实原理跟水平面一致，背景色拉一个由左到右 深蓝-蓝-蓝-深蓝的渐变，然后在用投影加深底部渐变颜色，需要注意的是，底部跟玻璃需要保持一定的间隙，以突出玻璃的厚度和玻璃凹面。