div+CSS教程：水母的制作技巧

我们一起看看下面的效果图：

代码结构为：

1
2
3
4
5
6

<div class="jellyfish">
<div class="jellyfish_head"></div>
<div class="jellyfish_tail">
<div class="jellyfish_tail_in"></div>
</div>
</div>

    一只水母jellyfish，分为头部jellyfish_head、尾部jellyfish_tail，其实里面那个jellyfish_tail_in没多大意义，就为了加一条触须；

水母头部jellyfish_head
    水母头部是一个椭圆形，顶部的又大又圆，底部需要一个拐角，不能太圆，感觉就像是一个‘倒着的钵’，具体圆角代码：

1

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

而重点的代码是内投影：

1

-moz-box-shadow:0px 0px 4px rgba(255,255,255,0.5) inset,1px 1px 2px rgba(255,255,255,0.2) inset,3px 3px 1px rgba(255,255,255,0.2) inset,-1px -1px 1px rgba(255,255,255,0.1) inset;

    采用四次内投影产生立体感，具体怎么产生的，我解释下，第一个是最基本的打底 色，第二第四是做向右下偏移跟向左上偏移的阴影，增加深度，第三个向右下偏移 了三个像素做一个高光效果，再用jellyfish_head:after，画了一个椭圆旋转rotate(-15deg)，调整透明度位置后作为最亮的 高光展现，这样水母的头部就制作完成；

水母尾部jellyfish_tail
    尾部jellyfish_tail取 左右边框，上下隐藏，然后做一个淡淡的内投影，调整位置，圆角的曲率，再通过 jellyfish_tail:after、jellyfish_tail:before制作多几条触须，调整好触须间的间隔；