css 圓角效果,2例

來源:互聯網
上載者:User

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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.