html5之css圆角盖子,鱼条

最新推荐文章于 2025-06-17 20:28:56 发布

最新推荐文章于 2025-06-17 20:28:56 发布 · 125 阅读

本文介绍了一种使用CSS来创建上圆下正的圆角矩形的方法，并提供了具体的HTML和CSS代码示例。该技巧适用于多种浏览器，包括对IE的支持。

1.前言。
弹出窗口，或者一般窗口，都可能用到圆角矩形，上圆下正。这个可以用css实现，当然直接图片也是可以的。注意下ie貌似圆角不是很支持,ie-css3.htc加入后还是不很美观,有解决方案可以共享下.
2.代码。
html：


		<div id='model_header' >

		</div>

css


#model_header{
border-radius:20px 0;
width:98%;
height:17px;
background:#FC9; 
behavior: url(js/ie-css3.htc); 
behavior: url(ie-css3.htc); 

/* Gecko browsers */
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-bottomright: 0;

/* Webkit browsers */
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;

/* W3C syntax */
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 0;
border-bottom-left-radius:  0;

}