总结--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}