全局背景变灰
//特殊情况下网页整体背景变灰的处理
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>
方法一:去除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;
}