Rounded Corners using CSS

最新推荐文章于 2023-11-08 21:26:17 发布

昆仑山白泽

最新推荐文章于 2023-11-08 21:26:17 发布

阅读量132

点赞数

分类专栏： web 文章标签： CSS Security Web UP HTML

本文链接：https://blog.csdn.net/iteye_15612/article/details/81820012

版权

web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

Of course, using pictures provides a much better user experience.

昆仑山白泽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Rounded Corners using CSS

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...
复制链接

扫一扫

专栏目录