css3 代码效果（ 投影效果、360度旋转、css3播放器效果）

range 输入类型会生成一个滑动条
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" >

/*投影*/注意：不能用overflow:hidden
.u-dropshadow{position:relative;background:#fff;}
.u-dropshadow:before{content:'';display:block;position:absolute;bottom:0;left:2%;width:96%;height:10px;box-shadow:0 0 20px rgba(0,0,0,.8);z-index:-1;}

/*去掉谷歌input黄色背景*/
-webkit-box-shadow: 0 0 0px 1000px white inset;

透明度

 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
 filter: alpha(opacity=0);
 -moz-opacity: 0;
 -khtml-opacity: 0;
 opacity:0;

/*ie6 ie7 不居中*/
 display: inline-block;
ie6 和IE7
*display:inline;
*zoom:-1

圆角
.round{
-khtml-border-radius: 10px; /* Konqueror */
-rim-border-radius: 10px; /* RIM */
-ms-border-radius: 10px; /* Microsoft */
-o-border-radius: 10px; /* Opera */
-moz-border-radius: 10px; /* Mozilla (如Firefox) */
-webkit-border-radius: 10px; /* Webkit (如Safari 和Chrome) */
border-radius: 10px; /* W3C */
}

自适应表格连续字符换行及单行溢出点点点显示
table-layout: fixed

文字换行
break-word :  内容将在边界内换行。如果需要，词内换行（word-break）也行发生

//谷歌12号字解决方法
.m-store-l dd em{border-radius: 3px;color: #FFFFFF;display: block;float: left;-webkit-text-size-adjust:none;font-size: 9px;height: 14px;line-height: 14px;margin:8px 0;text-align: center;width: 25px;background:#E0061E;}
.m-store-l dd em .m{ margin:0px;-webkit-transform:scale(.8); display:block}

//CSS  鼠标经过时改变DIV
.base_goods {background: none repeat scroll 0 0 #FFFFFF;display: block;float: left;margin: 0 4px 4px 0;overflow: hidden; padding: 0;position: relative; text-align: center;transition: all 0.3s linear 0s;}
.base_goods:hover {box-shadow: 0 0 8px #D7D7D7; transform: translateY(-5px);z-index: 8;}

//css渐变背景色
background: linear-gradient(#F6F6F6, #EEEEEE) repeat;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#F6F6F6), to(#EEEEEE));
background:-moz-linear-gradient(top, #F6F6F6, #EEEEEE);

//CSS3选择第一个元素和最后一个元素
.m-hd li:first-child{margin-left:0;}
.m-hd li:last-child{ width:86px}

//CSS3鼠标悬停div内容平面上360度旋转
<style>
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top;
-webkit-background-size: 220px 220px;
-moz-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
-moz-transition: -moz-transform 2s ease-out;
-o-transition: -o-transform 2s ease-out;
-ms-transition: -ms-transform 2s ease-out;
}
.keleyi:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
<div class="keleyi"></div>

//css3播放器效果
<style>
*{margin:0; padding:0;}
body{background-color: #E2E2E2;}
 
/** 整个菜单的宽度为50% 可以更具自己需求改 border-radius:100%; 矩形就变成圆形了 **/
.round-nav{width:50%; background:#ddd; margin: 20px auto;border-radius: 100%;
    position: relative; z-index: 990;border:solid 2px #ccc;
    box-shadow: 0px 0px 110px rgba(180, 180, 180, 0.3) inset,0px 0px 5px #D3D3D3;}
/** 高度 := 宽度 **/
.round-nav:before{content:""; padding-top:100%; display: block;}
 
.round-nav-item{width:50%; height: 50%; position: absolute; text-align: center; line-height: 50%; display: block;
    color:#c2c2c2; text-shadow:0px 1px 3px #fff; font:14pt Microsoft YaHei; letter-spacing: 1px;}
.round-nav-item:hover{background-color:#e5e5e5;color: #2BC917;text-shadow: 0px 0px 3px #FFFFFF;}
 
.round-nav-item span{
    width:100%; height: 100%;
}
 
/** 将原始设置成box容器，方便水平，垂直居中 **/
.round-nav-item span,.setBox{
    display: -webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center;
    display: -moz-box;-moz-box-orient: horizontal;-moz-box-pack: center;-moz-box-align: center;
    display: -o-box;-o-box-orient: horizontal;-o-box-pack: center;-o-box-align: center;
    display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;-ms-box-align: center;
}
 
/** 在圆形中设置4个宽高都为50%的容器分别对应圆形的上左上右下左下右,然后画对应的圆角 **/
/** 容器里面的span是用来存放文章 + 角度倾斜用的 **/
.top-left{left: 0px; top:0px; border-top-left-radius:100%; border-right: solid 1px #ccc; }
.top-left span{-webkit-transform:rotate(-50deg)}
 
.top-right{left:50%; top:0px; border-top-right-radius:100%; border-bottom: solid 1px #ccc;}
.top-right span{-webkit-transform:rotate(50deg)}
 
.bottom-left{left: 0px; top: 50%; border-bottom-left-radius:100%; border-top: solid 1px #ccc;}
.bottom-left span{-webkit-transform:rotate(50deg)}
 
.bottom-right{left: 50%; top: 50%;border-bottom-right-radius:100%; border-left: solid 1px #ccc;}
.bottom-right span{-webkit-transform:rotate(-50deg)}
 
.round-centerBtn,.round-centerBtn:before{width:50%; height: 50%; border-radius: 100%; background:#dfdfdf; position: absolute;
    left:25%; top:25%;z-index:991; border:solid 2px #e5e5e5; box-shadow: 0px 0px 3px #fff;
    font:18pt consolas;color: #fff;text-shadow: 0px 1px 1px #555; text-align:center; }
.round-centerBtn:before{content:""; background-color:#e5e5e5; display: block; z-index:-1;
    width: 100%; height: 100%; left:0px; top:0px;box-shadow:0px 0px 10px #e5e5e5 inset; border:none;vertical-align:middle}
 
/* 基本就这些东西，那些颜色可以用Google Chrome “审查元素” 功能慢慢调 */
.setBox span{ margin-top:50%; display:block}
</style>
<div class="round-nav">
<a class="round-nav-item top-left"><span>功能一</span></a>
<a class="round-nav-item top-right"><span>功能二</span></a>
<a class="round-nav-item bottom-left"><span>功能三</span></a>
<a class="round-nav-item bottom-right"><span>功能四</span></a>
<a class="round-centerBtn setBox"><span>圆心</span></a>
 </div>