1、圓角效果
.rec{
border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
}
2、半透明效果
.control{
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
}
3、漸變效果
#tbHandle th{
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標准的語法 */
}
4、CSS實現鼠標移到圖片上灰色變彩色效果，目前只能兼容IE、Chrome
.icon a img{
filter:gray; /* for IE */
-webkit-filter: grayscale(100%); /* for Chrome */
}
.icon a:hover img{
filter:;
-webkit-filter: grayscale(0%);
}
5、使段落文本的兩端絕對對齊
.title{ 2 text-align:justify; 3 text-justify:inter-ideograph; 4 }
6、利用負margin去除ul等距排列時多余的右邊距
ul{
list-style:none;
margin-right:-10px;
zoom:1; /* for ie7 */
}
ul li{
float:left;
margin-right:10px;
}
7、細線表格
.tb, .tb th, .tb td {
border:1px dashed #ccc;
border-collapse:collapse;
}
8、鼠標點擊文本框使邊框變色
.input360:focus{ 2 border:1px solid #7ecef4; 3 background:none; 4 }