当前位置:编程学习 > JS >>

CSS 圆角

又一款非常不错的CSS圆角代码,记得已经添加过很多了,但每一款都有自己独特的实现方法,是不是觉得实现CSS圆角的代码越来越精简了?确实是这样,这就是推荐这款代码的原因。
答案:<html> 
<head> 
<title>纯CSS圆角效果</title> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<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> 
<p>是不是代码超级少?</p> 
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> 
</div> 
</body> 
</html>

上一个:Js拖动层代码
下一个:非常酷的拖动分页(JS+CSS)

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,