css小技巧

每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？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);//谷歌浏览器
}

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

CSS :after 和：before选择器

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

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

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

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

-webkit-line-clamp

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

自动换行

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

强制英文单词断行

div{
word-break:break-all;
}

强制不换行

div{
white-space:nowrap;
}

模糊遮罩效率，模糊滤镜效果

-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);

巴特西

css小技巧

最新文章

热门文章