Home  >  Article  >  Web Front-end  >  Use css3 to create rounded corners example code

Use css3 to create rounded corners example code

零下一度
零下一度Original
2017-04-26 17:34:451495browse

Nowadays, more and more rounded corners are made using css3. Let me share one

/* 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. [code]

<p class="rbroundbox">
<p class="rbtop"><p></p></p>
<p class="rbcontent">
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis
ornare ultricies libero. Donec
fringilla, eros at dapibus fermentum,
tellus tellus auctor erat, vitae porta
magna libero sed libero. Mauris sed leo.
Aliquam aliquam. Maecenas vestibulum.</p>
</p><!-- /rbcontent -->
<p class="rbbot"><p></p></p>
</p><!-- /rbroundbox -->

The above is the detailed content of Use css3 to create rounded corners example code. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn