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部分。

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

这里是效果,呵呵

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

  1. <style>
  2.  
  3.   table.survey_invite{ margin-top: 20px; margin-bottom: 20px; background: #fefde6; color: #010101; }
  4.   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; }
  5.   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; }
  6.   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; }
  7.   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; }
  8.   table.survey_invite tr.row2 td.td2{ padding: 3px; }
  9.   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; }
  10.   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; }
  11.   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; }
  12.   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; }
  13.  
  14.   </style>
  15.    <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>
  16.   <tr class="row2"><td class="td1"></td><td class="td2">
  17.   <b>Tell us how we're doing:</b> Please answer a few questions about your experience to help us improve our Help Center.
  18.   </td><td class="td3"></td></tr>
  19.   <tr class="row3"><td class="td1"></td><td class="td2"></td><td class="td3"></td></tr></table>

效果:

Tell us how we’re doing: Please answer a few questions about your experience to help us improve our Help Center.

————–华丽的结束此文—————–

标签:,
发表于 2008-04-28 14:45:43 目录:HTML客户端, Web技术|WEB Tech [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
如果您喜欢本blog,欢迎你的feed订阅,谢谢你的支持

前7排已经被占据了 快抢好位置哦

  • 1楼 任平生 在 2008.04.28 14:56发表评论如下:

    好看,可惜有些麻烦。。。

  • 3楼 cosβ 在 2008.04.28 16:33发表评论如下:

    其实我自己实现的那个方式并不麻烦,可以用php 预定义好固定的html代码,然后直接引用便是啊!

  • 4楼 cosβ 在 2008.04.28 16:34发表评论如下:

    自己留言放一个链接在这里:http://browsers.evolt.org/download.php?/ie/32bit/standalone/ie6eolas_nt.zip 这个是独立的IE6,方便我今后需要的时候下载!此评论于此文无关~

  • 5楼 liutianyi 在 2008.04.28 17:51发表评论如下:

    唉,滔滔江水,连绵不绝啊。

  • 6楼 muzik 在 2008.04.28 21:39发表评论如下:

    最下边这个圆角我喜欢
    嫌麻烦的可以给需要圆角的使用同样的class,再利用js自行给它们全部加上首尾…

    我到现在还没用过IE7 蛮落伍的..

  • 7楼 炎藤 在 2008.04.29 04:04发表评论如下:

    我喜欢尖角…
    圆角很难看~

  • 转到第
(Required)
(Required, not published)
如果留言未显示请不要重复留言,我将为你恢复!


生活点滴Enjoy Life is proudly powered by WordPress | admin| About Us | cosbeta| Bluehost| site map 0.340s & 34