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>