Loading...

google的圆角代码

2008-04-28 14:45:43 发表于HTML客户端, 网站技术 本文链接: google的圆角代码

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

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

这里是效果,呵呵

这里是效果,呵呵

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

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


效果:

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客户端, 网站技术 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • 已经有8位大师动手指导 拒绝低俗
    • 1楼 任平生 在2008.04.28 14:56发表评论如下: 回复

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

    • 2楼 cosβ 在2008.04.28 16:33发表评论如下: 回复

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

      • 3楼 cosβ 在2008.04.28 16:34发表评论如下: 回复

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

        • 4楼 liutianyi 在2008.04.28 17:51发表评论如下: 回复

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

          • 5楼 muzik 在2008.04.28 21:39发表评论如下: 回复

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

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

            • 6楼 炎藤 在2008.04.29 04:04发表评论如下: 回复

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

              • 7楼 Bodhi 在2008.06.02 04:31发表评论如下: 回复

                我觉得 A 和 B 合并也可以,只是左上角的北京要延长。同样适合长高可变的区块 ^_^ 代价是背景图片体积微量扩大,收效是代码简便。

                评论分页: 1
                (Required)
                (Required, not published)
                如果留言未显示无需重复留言,我将为你恢复!