写在从深圳返家的途中。呆在一个地方已经至少两个钟了，看来十一要在路上与众位萍水相逢的同乘们一起度过了。
好了，话不多说，进入正题。下面来说说我们常用的CSS
(1) 透明:
filter:alpha(opacity=50); /* ie 有效*/
-moz-opacity:0.5; /* Firefox 有效*/
opacity: 0.5; /* 通用，其他浏览器 有效*/
在IE6中DIV透明的方法一般用filter；
.haorooms{opacity: 0; cursor:pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
(2) 阴影：
基本语法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}
阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；
①X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；
②Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；
③阴影模糊半径：此参数可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
④阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；
⑤阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。
-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);
⑥浏览器的兼容：
⑦为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。
(3)每逢大的灾难的时候，很多网站变成了灰色，如何让网站快速变灰？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);/*谷歌浏览器*/
}
有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：
<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>
(4) DIV可编辑，就是让一个div变成一个类似input输入框的效果。
在div中添加contentEditable="true" 属性就可以了，如下：
<div id="div1" contentEditable="true" ></div>
<div id="div2" contentEditable="true" ></div>
<div contentEditable="true" id="div3"></div>
(5) 有些网站为了不让用户复制，设置了div禁止选择的功能，设置如下属性：
unselectable="on"
onselectstart="return false;"
代码如下：
<div unselectable="on" onselectstart="return false;">
sdfsdfswerwer324234234234
</div>
(6) CSS 中form表单两端对齐
做form表单的时候，前面经常有姓名，年龄，公司名称等等，有的是2个字，有的是4个字，如何让字对齐呢？有的人的做法是打几个空格，但是这样不是很准确，最好的办法是如下：
css代码:
.test1 {
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
.test1:after{
content:".";
display: inline-block;
width:100%;
overflow:hidden;
height:0;
}
}
HTML代码：
<div class="box1">
<div class="test1">姓 名</div>
<div class="test1">姓 名 姓 名</div>
<div class="test1">姓 名 名</div>
<div class="test1">所 在 地</div>
<div class="test1">工 作 单 位</div>
</div>
(7) input声音录入按钮，（仅支持谷歌）
/*添加 x-webkit-speech 属性就可以了。*/
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词" x-webkit-speech>
(8) 给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;
}
(9) CSS :after 和：before选择器
after选择器通常在clear中使用，用法如下：
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}
写了这个clearfix，可以让外层div包裹整个内层，符合谷歌闭合机制。
也可以在某个元素前面或者后面追加，例如：
p:after
{
content:"haorooms：-";
background-color:yellow;
color:red;
font-weight:bold;
}
每个p标签后面都加了一个 -haorooms
(10)超出长度显示省略号
①单行文本显示...
一般要指定宽度，然后给如下四个属性。
display:bolck;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
案例代码：
.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
②多行文本显示....
主要属性-webkit-line-clamp
p {
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
跨浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；
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(和网页背景颜色一样的一张背景图) repeat-y;
background-color:#fff;
}
注意：
1) height高度正好是line-height的3倍；
2) 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
3) IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用...去模拟；
4) 要支持IE8，需要将::after替换成:after；
(11)CSS强制换行和不换行
①自动换行：
div{
word-wrap: break-word;
word-break: normal;
}
②强制英文单词断行：
div{
word-break:break-all;
}
③强制不换行：
div{
white-space:nowrap;
}
(12) CSS 圆角
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性。 目前来看，为了保证兼容性，只需同时设置-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;
border-radius: 15px;
（注意：border-radius必须放在最后声明，否则可能会失效。）
另外，早期版本Firefox的单个圆角的语句，与标准语法略有不同。
-moz-border-radius-topleft（标准语法：border-top-left-radius）
-moz-border-radius-topright（标准语法：border-top-right-radius）
-moz-border-radius-bottomleft（标准语法：border-bottom-left-radius）
-moz-border-radius-bottomright（标准语法：border-bottom-right-radius）
-----------------------------------------------------------------------------------------------------------------
(13) IE6 中png背景透明的最好方法
说到IE6，很多前端都很头大，我刚刚开始做网页的时候，也为之痛苦不堪。其中，我也总结了一下IE6中常见的问题，想margin了，padding了，ul li中点的显示问题了,弹出层被select选择框挡住了，等等。要查看详情，后续文章到时候有时候会把这些整理上去吧。（浏览器兼容问题的一些总结）可以看下！
本文的题目是IE6中png背景透明最好的方法，好吧，网上有很多，但是实践下来，这种DDPngMin.js效果最好。
应用方式：（网站尾部加上如下代码）
<!--[if IE 6]>
<script src="js/DDPngMin.js"></script>
<script>DD_belatedPNG.fix('.ad_img img,#banner_ctr ul');</script>
<![endif]-->
引进这个DDPngMin.js。后面是针对某个png做处理。
DDPngMin.js 下载:http://www.haorooms.com/uploads/images/DDPngMin.js
(14) css3弹性盒子
#haorooms ul { //父亲
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
box-orient: horizontal;
}
#haorooms ul li{ //儿子设置
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
float:none;
}
关于css3弹性盒子模型之box-flex，我在博客中暂时没有写相关文章，因为这个属性不支持IE，所以我很少用到。
我一般用别的方法来代替这个属性。想达到弹性盒子的要求，jquery mobile 有一套网格布局法，很不错，支持IE的，有时间可以参考一下，或者研究一下他们是怎么写的，参照他们的方法可以自己改写一下！
关于弹性盒子式的布局，大家也可以看下bootstrap,bootstrap提出栅格类的一个说法，你引进他的css之后，可以用col-mid-*来进行布局。
例如：
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
各占一半！
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
前面的是整个宽度的三分之二，后面是整个宽度的三分之一！
具体可以看看bootstrap的样式解释：http://v3.bootcss.com/css/
(15) CSS3的一些前缀总结
①css3为了更好的兼容多个浏览器，通常前面加一大堆前缀，有时候感觉很烦，前缀也容易忘记或者漏掉。下面总结一下！
-webkit /*为Chrome/Safari*/
-moz /*为Firefox*/
-ms /*为IE*/
-o /*为Opera*/
②以旋转为例
-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*/
③以border-radius为例(本文上面案例15，CSS 圆角已经提过圆角的问题，下面我们再来重提一下)：
-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+ */
④FF4、Saf5以及Chrome都支持border-radius属性了，我们就没有必要写以上两条了，代码变成：
border-radius: 12px;
所以有些常用的CSS3效果，由于浏览器都支持了，就不需要前缀，但是为了保险起见，你也可以加上前缀！
(16) css3的box-sizing
给了两个并排带边框的div百分比宽度，假如不用box-sizing，边框的宽度会在行内显示。用box-sizing：border-box,可以去除边框的占位。
浏览器支持IE9以上及火狐、谷歌、Opera等等。
①案例如下：
<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>
</body>
②语法：
box-sizing: content-box|border-box|inherit;
(17) 模糊遮罩效率，模糊滤镜效果
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
Blur：模糊效果。使选择区内的影像产生虚化的效果，可以平滑的转换影像中的生硬部分。
在这里跟大家解释说明一下，写于返家的路上其实指的是这一片简文的撰写，其实里面的内容我之前就早已准备好。
本文的内容都是我平时摘自网上或是在工作学习中自己记下的笔记。有通用的，有特殊的，也许会对大家或多或少有点点帮助吧。
嘿嘿，这也算是经验的共享，希望大家多多支持。也希望大家能够一起多多交流～
网友评论