Rounded Corners using CSS

jellyfish

浏览: 80084 次

最近访客更多访客>>

knight_black_bob

roc_wu

cowboycool

260664656

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS Security Web UP HTML

In web applications, one of the markups/decorations is rounded corners.

There are a lot of ways to do this, e.g., http://www.devwebpro.com/25-rounded-corners-techniques-with-css/.

Recently, I have the requirement to do this with minimal pictures envolved because pictures are considered not safe and using too much bandwidth, and thus are filtered out by some security firewalls.

One interesting post is here: http://blog.benogle.com/2009/04/29/css-round-corners/. Though the result has a little rough edge, it's better than plain text.

I need to extend this trick to a tabbed menu bar. All current practices I found are using pictures. So I come up with the following code.

<html>
<head>
	<style type="text/css">
		.mb1h, .mb2h, .mb3h, .mb4h {font-size:1px; overflow:hidden; display:block;}
		.mb1h {height:1px; margin:0 5px;}	
		.mb2h {height:1px; border-right:0px; border-left:0px; margin:0 3px;}
		.mb3h {height:1px; border-right:0px; border-left:0px; margin:0 2px;}
		.mb4h {height:2px; border-right:0px; border-left:0px; margin:0 1px;}
		.mheadh {border-right:0px; border-left:0px;}
		.mheadh h3 {margin: 0px 0px 0px 0px; padding-bottom: 0px;}

		.menutab a {text-decoration: none; background-color: #DBFF6C; color: black; border-bottom: 1px solid #DBFF6C;}
		.menutab a:hover {background-color: #ff0000; border-bottom: 1px solid #ff0000;}	
		.menutab a:visited {color: black; }	
	</style>
</head>
<body>

	<table cellspacing="0"  cellpadding="1">
		<tr>
			<td class="menutab">
				<a href="#">
				<b class="mb1h"></b><b class="mb2h"></b><b class="mb3h"></b><b class="mb4h"></b>
				<div class="mheadh"><h3>&nbsp;&nbsp;&nbsp;Home&nbsp;&nbsp;&nbsp;</h3></div>
				</a>
			</td>
			<td class="menutab">
				<a href="#">
				<b class="mb1h"></b><b class="mb2h"></b><b class="mb3h"></b><b class="mb4h"></b>
				<div class="mheadh"><h3>&nbsp;&nbsp;&nbsp;Register&nbsp;&nbsp;&nbsp;</h3></div>
				</a>
			</td>
		</tr>	
	</table>
			
	<div style="position:relative;top:0;left:0;background-color:#33ff33;height:20px;width:95%;padding-top:0px;padding:0;">
	</div>

</body>
</html>

The extension I did here is to make sure the "hover" function behaviors correctly.

tabbed menu