css 常用代码片段

全局背景变灰

//特殊情况下网页整体背景变灰的处理
html {
    filter: grayscale(100%);
}
//方案二：
html {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"grayscale\"><feColorMatrix type=\"matrix\" values=\"0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\"/></filter></svg>#grayscale");
}

谷歌浏览器不支持12px以下字体的解决方案

.chrome_adjust {  
        font-size: 9px;  
        -webkit-transform: scale(0.75);  
        -o-transform: scale(1);    //针对能识别-webkit的opera browser设置  
    }  

CSS背景图高斯模糊且全屏显示`

//1：使用CSS
.bg{
    background-image:url(scale.jpg);
    -moz-background-size:100%100%; /*  Firefox 3.6 */-o-background-size:100%100%;/* Opera 9.5 */-webkit-background-size:100%100%;/* Safari 3.0 */background-size:100%100%;/*  Firefox 4.0 and other CSS3-compliant browsers */-moz-border-image:url(scale.jpg) 0; /* Firefox 3.5 */filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale');/* for < ie9 */}
//2：使用 IMG 标签
<img class="stock" style="position: absolute; top: 0px; left: 0px; height: 100%; width: 100%;" src="default.jpg">
//补充方法
//3：使用 CSS3 的背景 Cover
.bg{
    background:#000url(scale.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

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

IE6下块元素如何实现display:inline-block的效果？

有两种方法：
1、 先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display 要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。代码如下（…为省略的其他属性内容）：

div {display:inline-block;…}
div {display:inline;}

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1 或float属性等）。代码如下：

div { display:inline-block; _zoom:1;_display:inline;} /推荐/
div { display:inline-block; _zoom:1;display:inline;} /推荐:IE67*/

透明度继承

方法一：做一个同级元素设透明度，和当前元素定位为position:absolute;
子元素就不会继承父元素的透明度
方法二：使用raba(0,0,0,0.8)
由于ie8以下不支持rqba,可以使用滤镜来做的同样的效果：代码：
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4B7D0000,endColorstr=#4B7D0000);
DXImageTransform.Microsoft.gradient滤镜里的startColorstr参数值是#AARRGGBB形式的，其中的AA是代表不透明度的十六进制，00表示完全透明，FF就是全不透明，化成十进制的范围就是0~255，剩下的RRGGBB就是颜色的十六进制代码。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的红色背景。如何把30%的不透明度转换成十六制呢？很简单，先计算#AA的的十进制x，x/255 = 3/10，解得x=3*255/10，然后再把x换算成十六进制，约等于4B。
换算关系：
rgba 和IE下filter数值的转换
rgba 透明值 IEfilter值
0.1 19
0.2 33
0.3 4C
0.4 66
0.5 7F
0.6 99
0.7 B2
0.8 C8
0.9 E5

竖排显示文字

h1 { 
width: 50px; 
font-size: 50px; 
word-wrap: break-word; 
letter-spacing: 20px; 
} 
<h1>我爱北京天安门</h1> 

inline-block元素间距去除掉方法介绍

方法一：去除html空格
方法二：margin负值
方法三：无闭合标签如<div class="space"> <a href="##">惆怅 <a href="##">淡定 <a href="##">热血</a> </div>
方法四：font-size设为0如：.space { font-size: 0; } .space a { font-size: 12px; }
方法五：使用letter-spacing如:.space { letter-spacing: -3px; } .space a { letter-spacing: 0; }
方法六：使用word-spacing 类似下面代码：.space { word-spacing: -6px; } .space a { word-spacing: 0; }
其它方法：yui3中：

.yui3-g { 
letter-spacing: -0.31em; /* webkit */ 
*letter-spacing: normal; /* IE < 8 重置 */ 
word-spacing: -0.43em; /* IE < 8 && gecko */ } 
.yui3-u { display: inline-block; zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */ 
letter-spacing: normal; 
word-spacing: normal; 
vertical-align: top; 
}

RayM

li { display:inline-block; background: orange; padding:10px; word-spacing:0; } 
ul { width:100%; display:table; /* 调教webkit*/ word-spacing:-1em; } 
.nav li { *display:inline;}

文本溢出

<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串 </div> 

多行文本溢出

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

多行文本溢出方案2 ,兼容

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

**特殊css处理：
chrome:记住密码的黄色背景**

input: -webkit-autofill{
-webkit-box-shadow: 0 0 0 400px #E8ECED inset;};

背景图铺满整个背景的需求，这里分享下使用方法
需要的效果
1. 图片以背景的形式铺满整个屏幕，不留空白区域
2. 保持图像的纵横比（图片不变形）
3. 图片居中
4. 不出现滚动条
5. 多浏览器支持
以图片bg.jpg为例
最简单，最高效的方法 CSS3.0
归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和center定位背景图，然后用background-size来使图片铺满，具体css如下

  html {
     background: url(bg.jpg) no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;
  }