css常用效果总结

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禁止选择的功能，设置如下属性：

unselectable="on" onselectstart="return false;"

具体代码：

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

这样，DIV里面的东西就不能选择复制了！

4、CSS 中form表单两端对齐

做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：

css代码:

.test1 {
            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+*/
        }
        @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
            .test1:after{
                content:".";
                display: inline-block;
                width:100%;
                overflow:hidden;
                height:0;
            }
        }

html代码：

<div class="box1">
    <div class="test1">姓 名</div>
    <div class="test1">姓 名 姓 名</div>
    <div class="test1">姓 名 名</div>
    <div class="test1">所 在 地</div>
    <div class="test1">工 作 单 位</div>
</div>

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

如下图红色框框中的按钮

代码如下：

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

添加 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、css3实现一个div设置多张背景图片

以前做网页布局的时候，一个div只能设置一张背景图片，设置多个背景的话，要用多个div嵌套才能实现，这样兼容性比较好。若您的网站要求兼容浏览器低版本，建议用这种方法。css3的出现，解决了一个div只能设置一个背景的问题，使一个div可以设置多个背景图片。background-image还可以设置线性渐变，等效果。

css3设置多张背景图片，可以如下写：

background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,url("haorooms.jpg") 400px 201px no-repeat;

也可以这么写：

background-image:url("1.jpg"),url("2.jpg"),url("3.jpg");
background-repeat: no-repeat, no-repeat, no-repeat;  
background-position: 0 0, 200px 0, 400px 201px;

8、CSS选中状态修改，谷歌滚动轴修改

滚动轴美化，一下代码是针对谷歌中滚动轴的设置美化，把它加到你的css中就可以了，代码如下：

::-webkit-scrollbar{
    padding-left:1px;
    background-color:#fafafa;
    overflow:visible;
    width:9px;
}
::-webkit-scrollbar-thumb{
    background-color:rgba(0, 0, 0, .1);
    background-clip:padding-box;
    border-left-width:2px;
    min-height:10px;
    box-shadow:inset 1px 1px 0 rgba(0, 0, 0, .1),inset 0 -1px 0 rgba(0, 0, 0, .07);
}
::-webkit-scrollbar-thumb:vertical:hover{
    background-color:rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-thumb:vertical:active{
    background-color:rgba(0, 0, 0, .2);
}
::-webkit-scrollbar-button{
    height:0;
    width:0;
}
::-webkit-scrollbar-track{
    background-clip:padding-box;
    border:solid transparent;
    border-width:0 0 0 2px;
}
::-webkit-scrollbar-corner{
    background:transparent;
}
::-webkit-scrollbar-track-piece{
margin: 10px 0;
-webkit-border-radius: 0;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
}

选中状态的修改,如下图:

很多网站洪，选中文字，不是默认的蓝色了，改成了别的颜色，修改方法如下：

::selection {
    background: #ff0;
}

将上面代码放到你的css中就可以了。

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

大致思想就是：input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

DOM结构：

<a href="javascript:;" class="a-upload">
    <input type="file" name="" id="">点击这里上传文件
</a>

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

CSS样式1：

/*a  upload */
.a-upload {
    padding: 4px 10px;
    height: 20px;
    line-height: 20px;
    position: relative;
    cursor: pointer;
    color: #888;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1
}

.a-upload  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer
}

.a-upload:hover {
    color: #444;
    background: #eee;
    border-color: #ccc;
    text-decoration: none
}

样式2：

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

修改后：

样式二：

10、CSS :after 和：before选择器

after选择器通常在clear中使用，用法如下：

.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}

写了这个clearfix，可以让外层div包裹整个内层，符合谷歌闭合机制。

也可以在某个元素前面或者后面追加，例如：

p:after{ 
    content:"haorooms：-";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

每个p标签后面都加了一个 -haorooms

11、透明度

opacity: .9; 
filter:alpha(opacity=90)

IE7和IE6中opacity是没有用的，在IE6中DIV透明的方法一般用filter；

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

12、超出长度显示省略号

一般要指定宽度，然后给如下四个属性。

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

案例代码：

.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}

13、阴影效果

-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
box-shadow: 0 1px 1px rgba(0,0,0,.2);

14、CSS强制换行和不换行

自动换行

div{ 
    word-wrap: break-word; 
    word-break: normal; 
}

强制英文单词断行

div{
    word-break:break-all;
}

强制不换行

div{
    white-space:nowrap;
}

15、CSS 圆角

IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性。 目前来看，为了保证兼容性，只需同时设置-moz-border-radius和border-radius即可。

-moz-border-radius: 15px;
border-radius: 15px;

（注意：border-radius必须放在最后声明，否则可能会失效。）

另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。

-moz-border-radius-topleft（标准语法：border-top-left-radius）
-moz-border-radius-topright（标准语法：border-top-right-radius）
-moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
-moz-border-radius-bottomright（标准语法：border-bottom-right-radius）

16、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;
}

关于css3弹性盒子模型之box-flex，我在博客中暂时没有写相关文章，因为这个属性不支持IE，所以我很少用到。

我一般用别的方法来代替这个属性。想达到弹性盒子的要求，jquery mobile 有一套网格布局法，很不错，支持IE的，有时间可以参考一下，或者研究一下他们是怎么写的，参照他们的方法可以自己改写一下！

关于弹性盒子式的布局，大家也可以看下bootstrap,bootstrap提出栅格类的一个说法，你引进他的css之后，可以用col-mid-*来进行布局。例如：

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

各站一半！

<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>

前面的是整个宽度的三分之二，后面是整个宽度的三分之一！

具体可以看看bootstrap的样式解释：http://v3.bootcss.com/css/

17、textarea禁止拖动

resize: none; //禁止拖动

以下是resize属性的的各个取值:

none：用户不能操纵机制调节元素的尺寸；
both：用户可以调节元素的宽度和高度；
horizontal：用户可以调节元素的宽度；
vertical：让用户可以调节元素的高度；
inherit：默认继承。

18、div垂直居中的方法总结

固定高宽div垂直居中

如上图，固定高宽的很简单，写法如下：

position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

不固定高宽div垂直居中的方法

方法一：

用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。

html如下：

 

<div class="block" style="height: 300px;">

    <div class="centered">
        <h1>haorooms案例题目</h1>
        <p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
    </div>

</div>

 

css如下：

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

方法二：

可以用table布局方法，但是这种方法也有局限性！

写法如下：

<table style="width: 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Unknown stuff to be centered.
     </td>
  </tr>
</table>

由于table写法比较费时，你也可以用div代替table,写法如下：

html：

<div class="something-semantic">
   <div class="something-else-semantic">
       Unknown stuff to be centered.
   </div>
</div>

css:

.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

 

方法三，终极解决方法：

 

以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！

 

方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()

 

demo如下：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>haorooms不固定高度div写法</title>

    <style>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:50%;
  height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}


    </style>
</head>
<body>
    <div class="center"></div>
</body>
</html>

 

我上面的css只是针对webkit内核的浏览器，其他内核浏览器写法如下：

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

有些弹出层的样式，也可以用这个方法居中：

position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

19、css固定宽高DIV内部元素垂直居中的方法

一个外层div,高宽是固定的，但是里面内容不是固定的。很多朋友的做法是头部加一个padding或者margin，这样，里面内容显得貌似是居中了，但是假如内容变化，这样头部的固定padding或者margin，始终不变。造成了垂直方向不会居中！

我们知道，假如下面一个div

<div class="outer"><div class="inner">haorooms内部内容</div></div>

样式是这样的

.outer{text-align:center;vertical-align: middle;width:200px;height:350px;}

vertical-align:middle是不管用的,很多朋友就在.inner上面做文章了，和我上面说的，加margin等等！那对于这种情况，有没有更好的解决方案呢？

解决方法

思路：加一个cssHack，设置cssHack的line-height等于外层div的高度，就可以使用vertical-align:middle了！

div如下：

<div class="outer">
    <div class="inner">haorooms内部内容</div><div class="v">cssHack</div>
</div>

样式如下：

* {
    margin: 0;
    padding: 0;
}
.outer {
    background-color: #ccc;
    font-size: 24px;
    height: 350px;
    text-align: center;
    overflow: hidden;
    width: 280px;
}
.outer  .inner,
.outer  .v {
    display: inline-block;
    zoom: 1;*display: inline; /* 用于触发支持IE67 inline-block */
}
.outer  .inner {            
    line-height: 1.8;
    padding: 0 4px 0 5px;
    vertical-align: middle;
    width: 262px;           
}
.outer  .v {
    line-height: 350px;
    text-indent:-9999px;
    width: 1px;         
}

这样就实现了div内部的垂直居中了！

20、纯css制作鼠标移上去显示图片效果

html代码

<table id="filelist" style="width:100%;">
   <tbody>
        <tr>
            <td class="filename ui-draggable ui-droppable"  width="30%;">
                <div class="name">
                    <span class="fileactions">
                        <a href="#" class="action action-download" data-action="Download" original-title="">
                            <img class="svg" src="svg/download.svg">
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share permanent" data-action="Share" original-title="">
                            <img class="svg" src="svg/public.svg">
                            <span>已共享</span>
                        </a>
                    </span>
                </div>
            </td>
            <td class="filesize" style="color:rgb(-4780,-4780,-4780)">70.3 MB</td>
            <td class="date">
                <span class="modified" title="September 29, 2014 14:45" style="color:rgb(0,0,0)">2 分钟前</span>
                <a href="#" original-title="删除" class="action delete delete-icon"></a>
            </td>
        </tr>

        <tr >
            <td class="filename ui-draggable ui-droppable"  width="30%;">
                <div class="name" >
                    <span class="fileactions">
                        <a href="#" class="action action-download" data-action="Download">
                            <img class="svg" src="svg/download.svg">
                            <span>下载</span>
                        </a>
                        <a href="#" class="action action-share" data-action="Share">
                            <img class="svg" src="svg/share.svg">
                            <span>分享</span>
                        </a>
                    </span>
                </div>
            </td>
            <td class="filesize" style="color:rgb(159,159,159)">762 kB</td>
            <td class="date">
                <span class="modified" style="color:rgb(0,0,0)" original-title="September 29, 2014 16:36">2 分钟前</span>
                <a href="#" original-title="删除" class="action delete delete-icon"></a>
            </td>
        </tr>
        </tbody>
</table>

上面代码我直接从项目中复制，可能有很多多余的css,大家只是看下大致代码！

精华的css

图片中的效果，大致的实现思路是，一开始设置为opacity=0，然后鼠标移上去之后显示。

代码如下：

#filelist a.action {
    display: inline;
    padding: 18px 8px;
    line-height: 50px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    display:none;
}
#filelist tr:hover a.action , #filelist a.action.permanent{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: .5;
    display:inline;
}
#filelist tr:hover a.action:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    display:inline;
}

css技巧分析

tr鼠标移上去，下面的a标签显示可以这么选择 #filelist tr:hover a.action 加入tr鼠标移上去hover了，那么tr下面的a标签的鼠标移上去效果同样有用，这么写： #filelist tr:hover a.action:hover

jquery中有attr，活动标签的属性，css也可以和jquery一样的类似选择。

例如下面的这个a标签

<a href="#"  data-action="Rename"  class="action"></a>

我们可以这么写样式：

a.action[data-action="Rename"]{
    padding: 16px 14px 17px !important;
    position: relative;
    top: -21px;
}

21、CSS3的一些前缀总结

css3为了更好的兼容多个浏览器，通常前面加一大堆前缀，有时候感觉很烦，前缀也容易忘记或者漏掉。下面总结一下！

-webkit  /*为Chrome/Safari*/
-moz  /*为Firefox*/
-ms   /*为IE*/
-o  /*为Opera*/

以旋转为例

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

以border-radius为例(本文上面案例15，CSS 圆角已经提过圆角的问题，下面我们再来重提一下)：

-moz-border-radius: 12px; /* FF1-3.6 */
-webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

FF4、Saf5以及Chrome都支持border-radius属性了，我们就没有必要写以上两条了，代码变成：

border-radius: 12px;

所以有些常用的CSS3效果，由于浏览器都支持了，就不需要前缀，但是为了保险起见，你也可以加上前缀！

22、css3的box-sizing

给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。用box-sizing：border-box,可以去除边框的占位。

浏览器支持IE9以上及火狐、谷歌、Opera等等。

案例如下：

<head>
<style>
div.container{
    width:30em;
    border:1em solid;
}
div.box{
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    border:1em solid red;
    float:left;
}
</style>
</head>
<body>

<div class="container">
    <div class="box">这个 div 占据左半部分。</div>
    <div class="box">这个 div 占据右半部分。</div>
</div>

</body>

语法：

box-sizing: content-box|border-box|inherit;

23、占位图

http://placeimg.com/宽/高/any     会自动帮你生成你想要的宽度和高度的图片。

24、清楚浮动

最容易的一种方式就是在浮动元素的父级加上：overflow: hidden;

25、 多行溢出省略

word-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 行数;
-webkit-box-orient: vertical;

26、  导航均分样式

父级（ul）：
display: -moz-box; 
display: -webkit-box;
子集 ( li ) :
-moz-box-flex: 1; 
-webkit-box-flex: 1; 
width:0;