css 圓角效果，2例

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,最終效果