1, 每逢大的灾难的时候, 很多网站变成了灰色, 如何让网站快速变灰? CSS 代码是很简单的, 用的是 CSS 的 filter 功能.
html 代码
- 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);// 谷歌浏览器
- }
还会存在一些兼容问题, 不能适应所有网站
2, 给 input 的 placeholder 设置颜色
HTML 代码
- ::-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;
- }
3,CSS :after 和: before 选择器
HTML 代码
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}
写了这个 clearfix, 可以让外层 div 包裹整个内层, 符合谷歌闭合机制.
4, 透明度
HTML 代码
- opacity: .9;
- filter:alpha(opacity=90)
IE7 和 IE6 中 opacity 是没有用的, 在 IE6 中 DIV 透明的方法一般用 filter;
HTML 代码
.haorooms{opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
5, 超出长度显示省略号
单行文本显示...
一般要指定宽度, 然后给如下四个属性.
HTML 代码
- display:bolck;
- overflow:hidden;
- white-space:nowrap;
- text-overflow:ellipsis;
多行文本显示....
主要属性 - webkit-line-clamp
HTML 代码
- p {
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
这个属性比较合适 WebKit 浏览器或移动端 (绝大部分是 WebKit 内核的) 浏览器
6, 阴影效果
HTML 代码
- -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
- -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
- box-shadow: 0 1px 1px rgba(0,0,0,.2);
7,CSS 强制换行和不换行
自动换行
HTML 代码
- div{
- Word-wrap: break-Word;
- Word-break: normal;
- }
强制英文单词断行
HTML 代码
- div{
- Word-break:break-all;
- }
强制不换行
HTML 代码
- div{
- white-space:nowrap;
- }
8,CSS3 的一些前缀总结
css3 为了更好的兼容多个浏览器, 通常前面加一大堆前缀
HTML 代码
- -webkit /* 为 Chrome/Safari*/
- -moz /* 为 Firefox*/
- -ms /* 为 IE*/
- -o /* 为 Opera*/
HTML 代码
- -webkit-transform:rotate(-3deg); /* 为 Chrome/Safari*/
- -moz-transform:rotate(-3deg); /* 为 Firefox*/
- -ms-transform:rotate(-3deg); /* 为 IE*/
- -o-transform:rotate(-3deg); /* 为 Opera*/
- transform:rotate(-3deg); /* 为 nothing*/
HTML 代码
- -moz-border-radius: 12px; /* FF1-3.6 */
- -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
- border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
9,css3 的 box-sizing
给了两个并排带边框的 div 百分比宽度, 假如不用 box-sizing, 边框的宽度会在行内显示. 用 box-sizing:border-box, 可以去除边框的占位.
浏览器支持 IE9 以上及火狐, 谷歌, Opera 等等.
HTML 代码
- <style>
- div.container { width:30em; border:1em solid; } div.box { box-sizing:border-box;
- -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box;
- /* Safari */ width:50%; border:1em solid red; float:left; }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="box">
- 这个 div 占据左半部分.
- </div>
- <div class="box">
- 这个 div 占据右半部分.
- </div>
- </div>
10, 模糊遮罩效率, 模糊滤镜效果
HTML 代码
- -webkit-filter: blur(3px);
- -moz-filter: blur(3px);
- -o-filter: blur(3px);
- -ms-filter: blur(3px);
- filter: blur(3px);
- 11.inline-block
inline-block 会把换行会自动解析为空格.
对父元素进行 font-size:0; 可以消除这个空隙.
12.z-index
z-index: 只在有定位的元素上起作用;
13.JS 判断客户端是否为 PC 还是手持设备
HTML 代码
- function IsPC() {
- var userAgentInfo = navigator.userAgent;
- var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
- var flag = true;
- for (var v = 0; v <Agents.length; v++) {
- if (userAgentInfo.indexOf(Agents[v])> 0) { flag = false; break; }
- }
- return flag;
- }
来源: http://www.qdfuns.com/article/27329/e8ec828db8b63be6c1f79f5412e7c432.html