如何制作圆角边框（没分了）

zyzlh 2009-07-17 10:21:42

圆角矩形窗体如何实现？？

...全文

83 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

now00000 2009-07-17

打赏
举报

1.直接用图片

2.CSS



 第一种  



<html xmlns:v>  



<head>  



<style>  



v\:*{behavior: url(#default#VML);}  



</style>  



</head>  



<body>  



<v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#e8e8e8" Filled="T" />  



刷新本页才能看到效果  



</body>  



</html>  



======================================  

第二种  

css圆角效果，IE6, firefox均显示正常  



<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>  

<br>无图片实现圆角框<br><br>  

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

</div>  

</body>  

</html>