css冷门属性

1. cursor:zoom-in | zoom-out 放大缩小 grab | grabbing  手型抓取

2. CSS3 greyscale 滤镜实现  图片转为黑白，每逢大的灾难的时候，很多网站变成了灰色，

.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);  //chrome18+
	
    filter: gray;
}

3.CSS3 blur滤镜实现  图片模糊化

.blur {    
    -webkit-filter: blur(10px); /* Chrome, Opera */
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}

4. 给 body 添加行高

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：·

//code from http://caibaojian.com/useful-css-tips.html
body {
  line-height: 1;
}

这样文本元素就可以很容易地从 body 继承。

5. 优化显示文本

有时，字体并不能在所有设备上都达到最佳的显示，所以可以让设备浏览器来帮助你：·

//code from http://caibaojian.com/useful-css-tips.html
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

注：请负责任地使用 optimizeLegibility。此外，IE /Edge没有 text-rendering 支持。

6. 使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：·

//code from http://caibaojian.com/useful-css-tips.html
a[href^="http"]:empty::before {
  content: attr(href);
}

相当方便。

7.给input的placeholder设置颜色

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

8.DIV可编辑，就是让一个div变成一个类似input输入框的效果。

<div id="div1" contentEditable="true"  ></div>
<div contenteditable="plaintext-only" placeholder="请输入内容"></div>

9、css input[type=file] 样式美化，input上传按钮美化

<style>
    .file {
        position: relative;
        display: inline-block;
        background: #D0EEFF;
        border: 1px solid #99D3F5;
        border-radius: 4px;
        padding: 4px 12px;
        overflow: hidden;
        color: #1E88C7;
        text-decoration: none;
        text-indent: 0;
        line-height: 20px;
    }
    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }
    .file:hover {
        background: #AADFFD;
        border-color: #78C3F3;
        color: #004974;
        text-decoration: none;
    }
</style>

<a href="javascript:;" class="file">选择文件
    <input type="file" name="" id="">
</a>

10、css 换行

/* 自动换行 */
div{
    word-wrap: break-word;
    word-break: normal;
}
/* 强制英文单词断行 */

div{
    word-break:break-all;
}
/* 强制不换行 */

div{
    white-space:nowrap;
}