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
b843
{
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>