google的圆角代码

时间：2008-04-28 14:45:43 类别：HTML客户端, Web技术|WEB Tech 本文链接：生活点滴Enjoy Life

不整点圆角怎么能算是2.0呢，所以我在bloggermap的新版设计中全部采用了圆角。下图是正在孕育中的新版bloggermap界面截图
而那个圆角是采用google的圆形背景来作为转角实现的，具体的思路如下图所示：

将一个DIV分作上中下三部分，上和下部分又由ABC三部分组成，A是一个有1/4圆角背景的DIV，同样C也是，当然啦，背景采用的是同一幅图，通过background-position来实现背景的偏移，下面是代码，包括CSS和HTML部分。

<style>
/*
round
*/
.t{width:100%;clear:both;height:6px;background:#fc3;font-size:2px;}
.i{width:100%;}
.l,.r{width:6px;height:6px;font-size:2px;
background:#fff url(http://google.com/groups/roundedcorners?a=af&c=ffcc33&w=6&h=6) no-repeat 0 0;float:left;
/*http://google.com/groups/roundedcorners?a=af&c=ffcc33&w=6&h=6使用这个地址居然无法显示*/
}
.r{float:right; background-position:-6px 0 ;margin: 0}
.b{ background-position: 0 -6px;}
.rb{ background-position: -6px -6px;margin: 0}
.rc1{BACKGROUND: #fc3;color:#000;margin:0;width:100%;overflow:visible;float:left;}
.blocklogin{margin-top:40px;width:450px;}
.block{width:99%;margin-top:10px;}
/* round end */
</style>
<div class="block">
<div class="t"><div class="l"></div><div class="r"></div></div>
<div class="rc1 i">
<p>这里是效果，呵呵</p>
</div>
<div class="t"><div class="l b"></div><div class="r rb"></div></div>
</div>

这里是效果，呵呵

确切的说，上面的代码和google关系不大，仅仅是圆形背景采用了google的图片而已。注意由于IE6对png图片的支持有限，所以该效果在IE6下有点别扭，IE7和FF正常。管他的呢，IE6马上就要推出历史的舞台了。好了，下面正式分享另外一个纯google的圆角中空样式（可惜我今天才发现，要不然就得节约我很多资源了）
代码：

<style>
table.survey_invite{ margin-top: 20px; margin-bottom: 20px; background: #fefde6; color: #010101; }
table.survey_invite tr.row1 td.td1{ width: 8px; height: 8px; background: url(http://www.google.com/help/hc/images/survey_yellow_bg_topleft.gif) top left no-repeat; }
table.survey_invite tr.row1 td.td2{ height: 8px; background: url(http://www.google.com/help/hc/images/survey_yellow_bg_stripe.gif ) top left repeat-x; }
table.survey_invite tr.row1 td.td3{ width: 8px; height: 8px; background: url(http://www.google.com/help/hc/images/survey_yellow_bg_topright.gif) top right no-repeat; }
table.survey_invite tr.row2 td.td1{ width: 8px; background: url(http://www.google.com/help/hc/images/survey_yellow_bg_stripe.gif ) top left repeat-y; }
table.survey_invite tr.row2 td.td2{ padding: 3px; }
table.survey_invite tr.row2 td.td3{ width: 8px; background: url(http://www.google.com/help/hc/images/survey_yellow_bg_stripe.gif ) top right repeat-y; }
table.survey_invite tr.row3 td.td1{ width: 8px; height: 8px; background: url(http://www.google.com/help/hc/images/survey_yellow_bg_bottomleft.gif) bottom left no-repeat; }
table.survey_invite tr.row3 td.td2{ height: 8px; background: url(http://www.google.com/help/hc/images/survey_yellow_bg_stripe.gif ) bottom left repeat-x; }
table.survey_invite tr.row3 td.td3{ width: 8px; height: 8px; background: url(http://www.google.com/help/hc/images/survey_yellow_bg_bottomright.gif) bottom right no-repeat; }
</style>
<table class="survey_invite" border="0" cellspacing="0" cellpadding="0" align="center"><tr class="row1"><td class="td1"></td><td class="td2"></td><td class="td3"></td></tr>
<tr class="row2"><td class="td1"></td><td class="td2">
<b>Tell us how we're doing:</b> Please answer a few questions about your experience to help us improve our Help Center.
</td><td class="td3"></td></tr>
<tr class="row3"><td class="td1"></td><td class="td2"></td><td class="td3"></td></tr></table>