css常用总结

浏览数：29 / 时间：2015年06月09日

1、每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？css代码是很简单的，用的是css的filter功能。

html {
   filter: grayscale(100%);//IE浏览器
  -webkit-filter: grayscale(100%);//谷歌浏览器
  -moz-filter: grayscale(100%);//火狐
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);//谷歌浏览器
}

有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

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

在div中添加contentEditable="true" 属性就可以了，如下：

<div id="div1" contentEditable="true"  ></div>  

<div id="div2" contentEditable="true" ></div>  

 <div contentEditable="true"  id="div3"></div>

3、有些网站为了不让用户复制，设置了div禁止选择的功能，设置如下属性：

<div unselectable="on" onselectstart="return false;">
sdfsdfswerwer324234234234
</div>

5、input声音录入按钮，（紧支持谷歌）

<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词"  x-webkit-speech>

6、给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;
}

7透明度

.haorooms{opacity: 0; cursor:pointer;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}

背景颜色设置透明时代码如下，IE8以下不支持，要去这个地址把startColorstr,endColorstr 转换。http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

.caption{ position: absolute;background:rgba(226,105,116,0.8);left: 0; top:0;display: none;color:#ffffff;height:100%;width:182px;padding:0 12px 0 13px;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#e26974",endColorstr="#e26974");}

8超出长度显示省略号

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

9.CSS强制换行和不换行

自动换行：word-wrap: break-word; word-break: normal;

强制英文单词断行：word-break:break-all;

强制不换行：white-space:nowrap;

10.css3弹性盒子

#haorooms ul { //父亲
            display: -moz-box;
            display: -webkit-box;
            display: box;
            -moz-box-orient: horizontal;
            -webkit-box-orient: horizontal;
            box-orient: horizontal;
        }
        #haorooms  ul li{ //儿子设置
            -moz-box-flex: 1;
            -webkit-box-flex: 1;
            box-flex: 1;
            float:none;
}