摘要：背景顏色透明處理瀏覽器中的濾鏡效果圖片垂直居中對(duì)齊第一種法第二種法制作小三角兼容固定在底部純粹的固定在底部用包裹內(nèi)容很長(zhǎng)的和文本這個(gè)代碼片段通過(guò)保證文本的包裹元素寬

.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法

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

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

.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);
}

 /*
 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.
 
 */

#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");
}

這個(gè)代碼片段通過(guò)保證文本的包裹元素寬度適應(yīng)內(nèi)容的寬度，能夠避免很長(zhǎng)的文本超出內(nèi)容區(qū)域

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+ */
}

text-shadow屬性能幫助你只用CSS創(chuàng)造3D文字

p.threeD{
    text-shadow:     -1px 1px 0 #ffffd,
                        -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) ;
}

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來(lái)創(chuàng)建多欄，它可以自適應(yīng)網(wǎng)頁(yè)，不兼容IE

#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以下的版本支持HTML5,在項(xiàng)目中加入以下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

//code from http://caibaojian.com/popular-css-snippets.html

主要用來(lái)兼容IE6，不建議使用，由于這個(gè)css代碼比較耗內(nèi)存

.some_element {
    background: url(image.png);
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="image.png", sizingMethod="crop");
}

轉(zhuǎn)自:前端開(kāi)發(fā)博客