纯CSS实现圆角效果经测试兼容ie，6,7,8 火狐

最新推荐文章于 2021-08-03 18:55:05 发布

weixin_30709061

最新推荐文章于 2021-08-03 18:55:05 发布

阅读量44

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Look_Sun/archive/2011/01/04/1925357.html

本文介绍了一种使用纯CSS实现圆角边框的方法，无需借助图片。通过巧妙地利用嵌套的HTML元素和CSS样式，可以创建出带有平滑圆角的容器。此方法适用于希望减少HTTP请求并提高页面加载速度的前端开发者。

<html>

<head>

<title>纯CSS实现圆角效果</title>

<style type="text/CSS">

div.RoundedCorner{background: #9bd1fa}

b.rtop, b.rbottom{display:block;background: #fff}

b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9bd1fa}

b.r1{margin: 0 5px}

b.r2{margin: 0 3px}

b.r3{margin: 0 2px}

b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

</style>

</head>

<body >

<div class="RoundedCorner">

<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>

<br/>无图片纯CSS实现圆角框<br/><br/>

<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>

</div>

<script type='text/javascript'>

//<![CDATA[

if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="<span class='runtimedisplay'>Run in 71 ms, 11 Queries, Gzip enabled.</span>";

//]]>

</script></body>

</html>

转载于:https://www.cnblogs.com/Look_Sun/archive/2011/01/04/1925357.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。