Div+CSS教程：如何制作玻璃瓶

Div+CSS教程：如何制作玻璃瓶

玻璃瓶

我们大家一起先看看玻璃瓶的代码结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="bottle">
<div class="bottle_top">
<div class="bottle_mouth"></div>
<div class="highlight"></div>
</div>
<div class="bottle_neck">
<div class="highlight"></div>
</div>
<div class="bottle_main">
<div class="bottle_inner"></div>
<div class="highlight"></div>
</div>
</div>

瓶顶bottle_top、瓶颈bottle_neck、瓶身bottle_main

    其实瓶顶、瓶颈、瓶身三者的基本结构一致，所以这里合并在一起，后面细节的时候再分开。
bottle_top我设定了宽高之后，取了它的左右边框，然后对它的bottle_top:after、bottle_top:before进行操作，after做顶部向上的面，before做底部向下的面，然后border做边框轮廓：

1
2
3

border:2px solid rgba(255,255,255,0.5);
border-bottom:2px solid rgba(255,255,255,0.6);
border-top:1px solid rgba(255,255,255,0.4);

    现在需要的是拉一个水平方向自左向右的白色-透明-透明-白色的渐变，如果用box-shadow的话，在箭头方向会产生一块很明显的白色-透明的区域，如果采用投影向上偏移的话，那么下面就会出现同样的不符合要求的区域，所以这个点上，应该采用背景色渐变比较合理；

瓶内bottle_inner

    bottle_inner没有像bottle_top那样一个圆柱形的设计，只是通过与瓶身bottle_main间隔一段距离产生厚度感，还有圆角：

1

-moz-border-radius:10px 10px 20px 20px/10px;

边框不是白色的，而是

1

border:1px solid rgba(0,0,0,0.01);

再配合投影

1

-moz-box-shadow:0px 0px 2px rgba(255,255,255,0.5) inset,0px 0px 8px rgba(255,255,255,0.6) inset,0px 0px 5px rgba(255,255,255,0.5);

因为最边缘的玻璃切面跟视线成90度，透明度很高，而 弧度与视线大的区域，透明度会很低，所以白色会重一些，再慢慢过渡到透明。这个我是搜一些玻璃瓶资料 分析出来的，做出来的效果也比白色边框再渐变要真实些，然而不单要对内投影，还要对外，因为玻璃身有一定厚度，不可能完全透明，所以写了 5个像素的向外投影作为瓶身的渲染色；

投影
    这里所说的投影，是对伪类进行box-shadow inset内投影，产生一个渐变面，让圆柱体的‘面’效果突出出来，这里我不用背景色而采用投影，是因为很难调整到符合透视的一个角度，而投影可以很轻松的做到，而且色彩融合得很好。比较特殊投影处理的有：

1> 瓶顶bottle_top的一个向下偏移的投影，如上面瓶口bottle_mouth图片，具体代码：

1

0px 3px 3px -1px rgba(255,255,255,0.3)；

1

2> 瓶颈bottle_neck:after，如图：

具体代码：

1

-moz-box-shadow:0px 5px 3px -2px rgba(0,0,0,0.05);

3> 瓶身bottle_main:before，如图：

具体代码：

1

-moz-box-shadow:0px 0px 6px rgba(255,255,255,0.7) inset,0px 0px 3px rgba(0,0,0,0.15) inset;

不偏移，羽化6像素，颜色为0.7的白色内投影，不偏移，羽化3像素，颜色为0.15的黑色内投影。这里是作为瓶底底色设置跟边缘泛光，增强立体感；

高光

挂上高光，立体感强烈了许多，分别对瓶顶、瓶颈、瓶身做高光，一条浅点细点的，一条宽点由左到右由白到透明的渐变，瓶颈只有宽没有细，瓶身细线由上至下做一个到80%的时候为透明的渐变…值得注意的是，高光需要贴着瓶壁，高度斜度保持一致，所以需要对高光进行一个斜切的变换：

1

-webkit-transform:skew(0deg,6deg);