這篇文章主要介紹怎么實(shí)現(xiàn)一個(gè)特殊的單面css框效果，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)始終堅(jiān)持【策劃先行，效果至上】的經(jīng)營(yíng)理念，通過(guò)多達(dá)十余年累計(jì)超上千家客戶的網(wǎng)站建設(shè)總結(jié)了一套系統(tǒng)有效的營(yíng)銷推廣解決方案，現(xiàn)已廣泛運(yùn)用于各行各業(yè)的客戶，其中包括：塔吊租賃等企業(yè)，備受客戶贊賞。

這是html部分：

<divid="beauty-boxes">Someexampletext</div>

CSS代碼

#beauty-boxes{

transition:all0.5sease;

position:relative;

float:left;

width:45%;

padding:2px;

margin:3px;

background:#fff;

-webkit-box-shadow:01px4pxrgba(0,0,0,0),0040pxrgba(0,0,0,0)inset;

-moz-box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0)inset;

box-shadow:01px4pxrgba(0,0,0,0.3),0040pxrgba(0,0,0,0)inset;

-moz-border-radius:4px;

border-radius:4px;

}

#beauty-boxes:before,

#beauty-boxes:after{

content:"";

position:absolute;

z-index:-3;

bottom:15px;

left:12px;

width:50%;

height:20%;

max-width:350px;

max-height:90px;

-webkit-box-shadow:015px10pxrgba(0,0,0,0.7);

-moz-box-shadow:015px10pxrgba(0,0,0,0.7);

box-shadow:015px10pxrgba(0,0,0,0.7);

-webkit-transform:rotate(-3deg);

-moz-transform:rotate(-3deg);

-ms-transform:rotate(-3deg);

-o-transform:rotate(-3deg);

transform:rotate(-3deg);

}

#beauty-boxes:after{

right:10px;

left:auto;

-webkit-transform:rotate(3deg);

-moz-transform:rotate(3deg);

-ms-transform:rotate(3deg);

-o-transform:rotate(3deg);

transform:rotate(3deg);

}.beauty-boxesp{

font-size:16px;

font-weight:bold;

}

#beauty-boxes:hover{

background-color:#161616;

color:#fff;

}

以上是“怎么實(shí)現(xiàn)一個(gè)特殊的單面css框效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：怎么實(shí)現(xiàn)一個(gè)特殊的單面css框效果
文章轉(zhuǎn)載：http://chinadenli.net/article44/pehjhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、品牌網(wǎng)站制作、網(wǎng)站策劃、建站公司、手機(jī)網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)