平时写代码需要用到的小技巧

2、半透明效果

 .control{
     opacity:0.5;
     -moz-opacity:0.5;
     filter:alpha(opacity=50);
 }

3、渐变效果

.nav{
    width:100%;
    height:50px;
    background: -webkit-linear-gradient(#15aae5, #14a1d9); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#15aae5, #14a1d9); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#15aae5, #14a1d9); /* Firefox 3.6 - 15 */
    background: linear-gradient(#15aae5, #14a1d9); /* 标准的语法 */
    background:#14a1d9\9; /* IE789 */
}

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{  text-align:justify;  text-justify:inter-ideograph;  } 

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 } 

 

    background: -webkit-linear-gradient(#15aae5, #14a1d9); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(#15aae5, #14a1d9); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(#15aae5, #14a1d9); /* Firefox 3.6 - 15 */
    background: linear-gradient(#15aae5, #14a1d9); /* 标准的语法 */
    background:#14a1d9\9; /* IE789 */