总结--15个实用CSS属性

平常我们编码过程中总会遇到好多听起来很简单，但是实现的时候有点挠头的需求。今天来总结一些实用的CSS属性。

1.为了不让用户复制内容，使用下面的属性禁止选择

<div unselectable="on" onselectstart="return false;">
        <!-- countent... -->
</div>

2.input声音录入按钮（仅支持谷歌）

<input id = "box"  x-webkit-speech>

3.input默认文字样式修改

::-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;
}

4.超出长度显示省略号

/* 单行文本显示 */
.box{
    display:bolck;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
/* 多行文本显示 */
#box{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

5.强制换行和不换行

/*自动换行*/
.box{   
    word-wrap: break-word; 
    word-break: normal;
} 
/*强制引文单词断行*/
.box{
    word-break:break-all;
}  
/*强制不换行*/
.box{
    white-space:nowrap;
}

6.两端对齐

.box{
    text-align:justify;
    text-justify:distribute-all-lines;/*ie6-8*/
    text-align-last:justify;/* ie9*/
    -moz-text-align-last:justify;/*ff*/
    -webkit-text-align-last:justify;/*chrome 20+*/
}

7.textarea禁止拖动

.box{resize: none;} 
 /*resize其他值：
    both：用户可以调节元素的宽度和高度；
    horizontal：用户可以调节元素的宽度；
    vertical：让用户可以调节元素的高度；
    inherit：默认继承。*/

8.模糊遮罩效率，模糊滤镜效果

.box{
    filter: blur(3px);
}

9.背景图裁剪

/*包含边框在内的整个盒子区域*/
.box{
    background-clip:border-box
}
/*不包含边框在内的盒子区域*/
.box1{
    background-clip:padding-box
}
/*内容区域*/
.box{
    background-clip:content-box
}

10.优化用户滑动流畅度

.box{
    -webkit-overflow-scrolling:touch;
}

11.文字排版方式

/* 内容为我们常规的水平排列，从左到右阅读，第二行在第一行的下方。 */
#box{
    writing-mode : horizontal-tb
}
/*内容垂直排列，从上到下，从右到左阅读，第二行在第一行的左侧。 */
.box{
    writing-mode : vertical-rl
}
/*内容垂直排列，从上到下，从左到右阅读，第二行在第一行的右侧。 */
.box{
    writing-mode : vertical-lr
}
/*内容垂直排列，从上到下，从左到右阅读，在所有的排版方式中，即使是垂直版式, 字的顶部都是向左的。 */
.box{
    writing-mode : sideways-lr
}
/*内容垂直排列，从上到下，从右到左阅读，在所有的排版方式中，即使是垂直版式，字的顶部都是向右。 */
.box{
    writing-mode : sideways-rl
}

12.点击穿透

.box{
    pointer-events: none;
}

13.文字模糊效果

.box{
    color: transparent;
    text-shadow: #111 0 0 5px;
    /*参数说明：颜色 X轴偏移量 Y轴偏移量 模糊程度 */
}

14.文字空隙和单词空隙

/* 文字间隙 */
.box{
    letter-spacing:10px
}
/* 单词空隙 */
.box{
    word-spacing:10px
}

15.解决图片失真呈现的锯齿状

.box{
    /* 适用于IE7+ */
    -ms-interpolation-mode:bicubic;
    /* 适用于Firefox 3.6+ */
    image-rendering:optimizeQuality
}