1.你可以切成4个图，或者两个图。如下图
2.代码
html
<div class="box"> <div class="outer"> <div class="inner"> <h2>headlines</h2> <p>Content ,fdascot<br /> Content ,fdascot<br /> Content ,fdascot<br /> Content ,fdascot<br /> </p> </div> </div> </div> <div class="box2"> <div class="outer2"> <div class="inner2"> <h2>headlines</h2> <p>Content ,fdascot<br /> Content ,fdascot<br /> Content ,fdascot<br /> Content ,fdascot<br /> </p> </div> </div> </div>
css
.box{background:url(images/bottom_left.gif) no-repeat left bottom;width:300px;}
.outer{background:url(images/bottom_right.gif) no-repeat right bottom;padding-bottom:5%;}
.inner{background:url(images/top_left.gif) no-repeat left top;padding-left:20px;}
.inner h2{background:url(images/top_right.gif) no-repeat right top;padding-top:5% ;}
.box2{background:url(images/corner-left.gif) no-repeat left bottom;width:300px;}
.outer2{background:url(images/corner-right.gif) no-repeat right bottom;padding-bottom:5%;}
.inner2{background:url(images/corner-left.gif) no-repeat left top;padding-left:20px;}
.inner2 h2{background:url(images/corner-right.gif) no-repeat right top;padding-top:5%;}
3,最终效果
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。