css常見的快捷開發代碼彙總（長期更新），包括CSS3代碼，有一些css效果很頑固，常常會一時找不出解決方案，網絡上也有不少的工具和高手提供了具體的瀏覽器兼容代碼，這個頁面我從此會常常整理，但願可以幫到重構和正在找這些效果的代碼，若是你有更好的實現方案，不妨告訴我，或者你有解決不了的，也不妨告訴我。你想找瀏覽器兼容寫法嗎？點CSS瀏覽器兼容與hack代碼（經驗彙總，保持最新）javascript
Css背景顏色透明（#ddd）
請參考在線版製做css
.liter{
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4CDDDDDD', endColorstr='#4CDDDDDD');
}
:root .liter {
filter:none; /*處理IE9瀏覽器中的濾鏡效果*/
background-color:rgba(221,221,221,0.3);
}
圖片垂直居中對齊
第一種：table-cell法
<div class="test_box"> <img src="book.jpg" alt="css經常使用代碼大全" alt="" /> </div>
.test_box {display:table-cell;width:200px;height:200px;vertical-align:middle;text-align:center;
*float:left;*font-family:simsun;*font-size:200px;*line-height:1;
border:1px solid #000000;
}
.test_box img {vertical-align:middle;}
第二種：span法
<div class="test_box"> <span class="hook"></span> <a href="http://blog.linxz.de/css_book/" target="_blank"><img src="book.jpg" alt="css經常使用代碼大全" alt="" /></a> </div>
.test_box {width:200px;height:200px;overflow:hidden;text-align:center;font-size:0;border:1px solid #000000;}
.test_box .hook {display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;}
.test_box img {vertical-align:middle;border:0 none;}
css border製做小三角（兼容IE6）
工具請參考小志的在線版html
.triangle {display:inline-block;width:0;height:0;overflow:hidden;line-height:0;font-size:0;
vertical-align:middle;
border-right:7px solid #000fff;
border-left:0 none;
border-top:7px solid transparent;
border-bottom:7px solid transparent;
_color:#FF3FFF;
_filter:chroma(color=#FF3FFF);
}
CSS固定在底部
CSS代碼前端
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
/* IMPORTANT
You also need to include this conditional style in the of your HTML file to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
< ![endif]-->
*/
html代碼html5
<div id="wrap"> <div id="main"> </div> </div> <div id="footer"> </div>
純粹的css固定在底部
#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}
用CSS包裹內容很長的URL和文本
這個代碼片斷經過保證文本的包裹元素寬度適應內容的寬度，可以避免很長的文本超出內容區域。java
pre {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
用css3創造3D文字
text-shadow屬性能幫助你只用CSS創造3D文字。css3
p.threeD{
text-shadow:
-1px 1px 0 #ddd,
-2px 2px 0 #c8c8c8,
-3px 3px 0 #ccc,
-4px 4px 0 #b8b8b8,
-4px 4px 0 #bbb,
0px 1px 1px rgba(0,0,0,.4),
0px 2px 2px rgba(0,0,0,.3),
-1px 3px 3px rgba(0,0,0,.2),
-1px 5px 5px rgba(0,0,0,.1),
-2px 8px 8px rgba(0,0,0,.1),
-2px 13px 13px rgba(0,0,0,.1)
;
}
CSS透明度
div{
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
}
改變博客中默認選中文本的顏色
::selection {
background: #ffb7b7; /* Safari */
color: #ffffff;
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
color: #ffffff;
}
多重背景圖片
#multiple-images {
background: url(image_1.png) top left no-repeat,
url(image_2.png) bottom left no-repeat,
url(image_3.png) bottom right no-repeat;
}
多欄CSS3
使用css3來建立多欄，它能夠自適應網頁，不兼容IEweb
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
文本溢出省略
.textoverflow a {
display:block;
width:120px;
margin: 0px 0px 0px 3px;
white-space: nowrap;
overflow: hidden;
float: left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow: ellipsis; /* for IE */
}
.textoverflow:after{ content: "..."; }/* for Firefox */
@media all and (min-width: 0px){ .textoverflow:after{ content:""; }/* for Opera */ }
讓IE9如下的版本支持HTML5express
在項目中加入如下JS代碼瀏覽器
// html5 shiv
if (!+[1,]) {
(function() {
var tags = [
'article', 'aside', 'details', 'figcaption',
'figure', 'footer', 'header', 'hgroup',
'menu', 'nav', 'section', 'summary',
'time', 'mark', 'audio', 'video'],
i = 0, len = tags.length;
for (; i < len; i++) document.createElement(tags[i]);
})();
}
or
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
PNG32透明（IE6）
主要用來兼容IE6，不建議使用，因爲這個css代碼比較耗內存。
.some_element {
background: url(image.png);
_background: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}
參考文章
http://miyuki.42code.com/2012/02/useful-css-snippets/
http://www.djavupixel.com/development/css-development/master-css3-ultimate-css-code-snippets/