欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

使用css3制作圆角实例代码

程序员文章站 2022-04-19 21:09:12
...

现在使用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. 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 -->

以上就是使用css3制作圆角实例代码的详细内容,更多请关注其它相关文章!

相关标签: css3,圆角