html5之css圆角盖子,鱼条

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;

}

你可能感兴趣的:(html5之css圆角盖子,鱼条)