CSS3 酒杯配色总是这么逊色。。。。哎。

从大漠那看CSS 从小熊 以及各个UED们那看JS，最近开始筹备深入学习 HTML5 CSS3的东西。

酒杯如琉璃，杯盘如翡翠。

    #desk{
        width: 150px;
        height: 280px;
    }
        #demo{
            width: 100px;
            height: 200px;
            opacity: 1;
            position: relative;
        }
        #demo:before{
            content: "";
            width: 80px;
            height: 85px;
            border: 1px solid #ccdfff;
            border-radius: 15% 15% 95% 95% / 95% 95% 100% 100%;
            background: -moz-radial-gradient(left bottom , #bbbbcc, #ccccdd 30%, #ccccee) repeat scroll 0 0 transparent;
            opacity: 1;
            position: absolute;
            left: 0;
            top: 20px;
        }
        #demo:after{
            content: "";
            width: 70px;
            height: 20px;
            border: 1px solid #ccccff;
            border-radius: 100%/ 100%;
            background: -moz-radial-gradient(right top , #bbccff, #ddeeff, #FFFFFF) repeat scroll 0 0 transparent;
            position: absolute;
            box-shadow: 1px #fff inset;
            left: 5px;
            top: 10px;
        }
        #column{
            width: 10px;
            height: 70px;
            background: -moz-linear-gradient(left, #aabbff, #aabbdd, #bbccff, #bbddff);
            position: absolute;
            left: 37px;
            top: 106px;
            border-radius: 0 0 10px 10px;
            
        }
        #column:before{
            content: "";
            background: -moz-radial-gradient(left, #aabbff, #bbbbff, #ccccff);
            width: 100px;
            height: 20px;
            border: 1px solid #ddf;
            box-shadow: 1px #fff inset;
            border-radius: 100%;
            position: absolute;
            left: -45px;
            top: 60px;
            z-index: -1;
        }
        #wine{
            width: 100px;
            height: 100px;
            position: relative;
        }
        #wine:before{
            content: "";
            width: 74px;
            height: 50px;
            border-radius: 0% 0% 50% 50% / 30% 30% 100% 100%;
            background: -moz-radial-gradient(left bottom, #cc3333, #aa1111, #bb2222 30%, #eeeeee);
            position: absolute;
            left: 4px;
            top: 50px;
        }
        #wine:after{
            content: "";
            width: 74px;
            height: 20px;
            position: absolute;
            left: 4px;
            top: 40px;
            border-radius:100%;
            background: -moz-radial-gradient(center center , #AA1111, #CC3333, #BB2222, #DDAAAA, #FF9999) repeat scroll 0 0 transparent;
        }

 

CSS代码如上。关于IE的样式 亲，自己搞吧。我是最不喜欢搞IE的了。。

整体呢，就是先画个杯子的主要部分， 再画个椭圆当杯子口，然后画个杯子的柱子底座什么的就简单了。。。还是觉得不好看。。。

DOM结构就是

    <div id="desk">
        <div id="demo"><div id="wine"></div><div id="column"></div></div>
    </div>

 

－－！ 是不是难看的要死了。。。反正我是hold不住了。。要死的心都有了。。。怎么这么难看。。。。