這篇文章主要介紹怎么實現一個特殊的單面css框效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯始終堅持【策劃先行，效果至上】的經營理念，通過多達十余年累計超上千家客戶的網站建設總結了一套系統有效的營銷推廣解決方案，現已廣泛運用于各行各業的客戶，其中包括：塔吊租賃等企業，備受客戶贊賞。

這是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;

}

以上是“怎么實現一個特殊的單面css框效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

網頁題目：怎么實現一個特殊的單面css框效果
文章轉載：http://vcdvsql.cn/article44/pehjhe.html

成都網站建設公司_創新互聯，為您提供、品牌網站制作、網站策劃、建站公司、手機網站建設、企業網站制作

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯