使用css3製作圓角執行個體代碼

來源:互聯網
上載者:User

現在使用css3的製作圓角越來越多了,下面小編就來分享一個

/* set millions of background images */.rbroundbox { background: url(nt.gif) repeat; }.rbtop p { background: url(tl.gif) no-repeat top left; }.rbtop { background: url(tr.gif) no-repeat top right; }.rbbot p { background: url(bl.gif) no-repeat bottom left; }.rbbot { background: url(br.gif) no-repeat bottom right; }/* height and width stuff, width not really nessisary. */.rbtop p, .rbtop, .rbbot p, .rbbot {width: 100%;height: 7px;font-size: 1px;}.rbcontent { margin: 0 7px; }.rbroundbox { width: 50%; margin: 1em auto; }

2. [代碼]

<p class="rbroundbox"><p class="rbtop"><p></p></p><p class="rbcontent"><p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Duisornare ultricies libero. Donecfringilla, eros at dapibus fermentum,tellus tellus auctor erat, vitae portamagna libero sed libero. Mauris sed leo.Aliquam aliquam. Maecenas vestibulum.</p></p><!-- /rbcontent --><p class="rbbot"><p></p></p></p><!-- /rbroundbox -->
相關文章

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.