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> Home </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> Register </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.
Of course, using pictures provides a much better user experience.
- 大小: 1.1 KB
分享到:
相关推荐
一款很不错的,用CSS实现网页的圆角边框设计
asp.net ajax RoundedCorners控件的视频(带中文字幕)c#源码,希望对大家有用.
jQuery Canvas Rounded Corners - jQuery圆角插件
Extending ASPX Panel Control to produce Rounded Corners。
rounded-corners.js 想知道怎么找见的 可以私信 然后我告诉你方法 这里就不写了
CSS样式Table[3] - practical-css3-tables-with-rounded-corners-demo
Unity-UI-圆角 这些组件和着色器使您可以向UI元素添加圆角! 如何安装 包装经理 打开%projectname%/Packages/manifest.json 在依赖项部分添加以下内容: ...选择RoundedCorners着色器 将材质附加到Imag
如果下了看不了。练习我 QQ626164558
带有圆角和边框的css3六角形。 css3六边形,可设置border与border-radius 结果 查看 捕获 大小和边框宽度 您可以按比例更改六边形的大小和边框宽度。 要在此处更改css文件。 -webkit-transform : rotate ( -30 deg ...
jQuery Corners 好用的jQuery圆角插件
作者:Charles Wyke-Smith 李松峰(译) 副书名:Stylin’ with CSS: A ...Learn about CSS3 shadows, rounded corners, gradients, and background images Create interactivity with CSS3 transforms and transitions
安装:将文件RoundedCorners.inx和RoundedCorners.py复制到Inkscape目录中的Extensions文件夹中。 在Windows上,该文件位于C:\ Users [用户名] \ AppData \ Roaming \ inkscape \ extensions。 或者,可以将其复制...
NULL 博文链接:https://paskaa.iteye.com/blog/285051
Create rounded corners, shadows, gradients, sprites, and transparency Replace text with images without affecting accessibility Style text with fonts, highlights, decorations, and shadows Create ...
Android-rounded-corners-image-view- 此示例演示如何在卡片视图中使用圆形图像视图(您可以在任何视图中使用它) cradit 转到@Pavel Dudka
Use rounded corners minus the bloated HTML. Allow your visitors to select their preferred look and feel. Let the W3C validator do your debugging. Reduce the burden of site maintenance and updates. … ...
Rounded
RoundCorners祝大家2021年少一点泪水,多一些回报,努力的都能实现!比较常用的ViewGroup和View的圆角实现,一发治好设计的圆角病。效果预览特点LinearLayout、RelativeLayout、FrameLayout支持圆角ImageView、...
% candidates, then rounded corners and false corners due to boundary % noise and details were eliminated. % 5. End points of line mode curve were added as corner, if they are not % close to the ...