CSS小技巧

• 单行文字超出显示省略号

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

• 多行文字超出显示省略号（数字2为想要设置的行数，不能设置高度）

overflow: hidden;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 2;

• 画三角形

width: 0;
height: 0;
overflow: hidden;            
border-width: 10px;
border-color: transparent transparent transparent blue;
border-style: dashed dashed dashed solid;

• 修改文本框提示文字颜色

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #00f;  
        }
        input::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #00f;
        }
        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #00f;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #00f;
        }

• IE各浏览器hack写法

只在IE下生效

<!--[if IE]>

这段文字只在IE浏览器上显示

<![endif]-->

 

只在IE6下生效

<!--[if IE 6]>

这段文字只在IE6浏览器上显示

<![endif]-->

 

只在IE6以上版本生效

<!--[if gt IE 6]>

这段文字只在IE6以上版本IE浏览器上显示

<![endif]-->

 

只在IE7上不生效

<!--[if ! IE 7]>

这段文字在非IE7浏览器上显示

<![endif]-->

 

非IE浏览器生效

<!--[if !IE]><!-->

这段文字只在非IE浏览器上显示

<!--<![endif]-->

• background-position的拓展语法

background-position:right 20px bottom 10px;