Sym - 一个用 Java 实现的现代化社区平台 • 源码 • 注册

Pipe - 小而美的开源博客平台 • 体验 • 皮肤
Solo - 一个用 Java 实现的博客系统,为你或你的团队创建个博客吧! • 源码下载 
Wide - 一个基于 Web 的 Go 语言 IDE • 教程试用

实现圆角的几种方式

作者: 李丽媛

邮箱:lly219@gmail.com

日期:2009-1-6

 

1.css 3 的圆角属性:
    -moz-border-radius:
    -webkit-border-radius:

   
    参数有 4 个时:上左的圆角大小,上右的圆角大小,下右的圆角大小,下左的圆角大小
    参数有 3 个时:上左的圆角大小,上右的圆角大小和下左的圆角大小,下右的圆角大小
    参数有 2 个时:上左的圆角大小和下右的圆角大小,上右的圆角大小和下左的圆角大小    参数有 1 个时:四个圆角的大小
    除此之外还可以使用:
    -moz-border-radius-topright:
    -moz-border-radius-topleft:
    -moz-border-radius-bottomright:
    -moz-border-radius-bottomleft:
    -webkit-border-top-right-radius:
    -webkit-border-top-left-radius:
    -webkit-border-bottom-left-radius:
    -webkit-border-bottom-right-radius:


    题外话:
        -moz 是 Mozilla Firefox 的特有标志,也就是说只有在 FF 下才支持
         webkit 是 Chrome 和 Safari 中 js 的核心,从此可推出 - webkit 应该是在 Chrome 和 Safari 下被支持
         想起以前 opacity 被 FF 支持用的是 - moz-opacity,到 3.0 后,-moz-opacity 被移除更改为 css 中标准的 optical。可是这次他即便移调了’-moz-‘,后面的border-radius-topright、border-radius-topleft、border-radius-bottomright、border-radius-bottomleft 也不是标准,还是需要修改。不得不感叹 Google 的‘cool’。
          但是 IE 真是牛啊,根本不屑于这些标准,直接使用 filter:alpha(opacity=num), 随着 IE 9 发布的消息,证明了标准才是王道。
            
    回归主题,如果你再加上阴影、边框、字体阴影的话那效果就更加棒了。也就是
    border:width style color
    text-shadow:none color length
    -moz-box-shadow:inset||[length,length,length,length||<color>]none
    -webkit-box-shadow:inset||[length,length,length,length||<color>]none



2.background-image:
    <a style='background-image:url('圆角图片,最好是透明的PNG ')'> 哇咔咔,简易的圆角 </a>
   
    在兼容浏览器的情况下最简单的实现方式, 但缺点也很大:需要大量图片,你必须为每一种尺寸的圆角准备一张图片,即便他们都是一个色
调的。即便你把全部图片放到了一幅图里面,使用了 sprite,它还是会占用你大量的不必要的带宽。

3.table(分解为 3 个图)

    汗,图片都准备好了,发现 csdn 不能上传图片了。。。


 
    原理:(也许你很想要马上就能拿到手,可以用的代码,但我告诉你,那要的话它永远都不会属于你的)
    <table><tr><td></td><td></td><td></td></tr></table>
        a. 把 border、cellpadding 和 cellspacing 设置为 0
        b. 第一个 td 背景设置左边的图片:
        background:color url(' 注意圆角为透明,如果为了支持IE,可使圆角部分颜色与所在背景颜色一致,这样就看不出来了 ' ) position no-repeat ,然后把heightwidth 设置为你左边圆角的高度和宽度。
        c. 第二个 td 背景设置中间的图片:
        background:color url( ' 注意高度和左右td的图片一样,使用1px宽度就足以 ') position repeat-x ,然后把width 设置为你需要的宽度即可,最好把 text-aline 设置为center ,居中会更加的好看。
    d. 第三个 td 背景设置左边的图片:
        background:color url(' 注意圆角为透明,如果为了支持IE,可使圆角部分颜色与所在背景颜色一致,这样就看不出来了 ') position no-repeat ,然后把width 设置为你左边圆角的宽度。

    想要浏览器兼容,又不想为每一处圆角弄一张图片,对 css 不是很熟悉,此方法值得一试。因为你不需要清晰的值得padding、margin、position、display、float、div、span、ul、li 这写 tag。

     题外话:
    不知道为什么,很多人都是盲目的去崇拜 div,我承认 div 很好,多个 div 可以根据position、height、width、float 的设置展现出很好看的效果,但是我认为有些时候 table 也是不可或缺的,在简单的表格,登录,注册中,我不相信你使用 div 会比我使用 table 来的快速高效。最后,不要认为 table 是古老的东西就不去使用sprites (网上说它是 css 雪碧。。。)

4.table(分解为 2 个图)

    汗,图片都准备好了,发现 csdn 不能上传图片了。。。


   原理:把方法3中的前两个td合并为一个td。

        <table><tr><td></td><td></td></tr></table>
        a. 把 border、cellpadding 和 cellspacing 设置为 0
        b. 第一个 td 背景设置左边的图片:
        background:color url(' 注意圆角为透明,如果为了支持IE,可使圆角部分颜色与所在背景颜色一致,这样就看不出来了 ' ) position no-repeat ,然后把height 设置为你左边圆角的高度,width 设置为你需要的长度,最好把 text-aline 设置为center ,居中会更加的好看。注意 :该图的长度要足够长,为你最长圆角的长度,且此处宽度应小于或等于图片长度 - 下一个 td 的宽度(有点绕,不晓得你看懂没?)
        c. 第二个 td 背景设置左边的图片:
        background:color url(' 注意圆角为透明,如果为了支持IE,可使圆角部分颜色与所在背景颜色一致,这样就看不出来了 ') position no-repeat ,然后把width 设置为你左边圆角的宽度。

 

        此方法的图片虽然比上一个方法简单,也少了个td ,但是图片却比上一个方法大很多。

5.

    实现的方法就很多了,网上流传着不同的版本。这里就不详细给出了,算了,还是随便贴点小代码吧。。

.submitButton {
    background: transparent url(../image/style/hp_sprite.gif) no-repeat scroll -183px -42px;
    cursor: pointer;
    left: 12px;
    margin-top: 5px;
    position: relative;
    top: -10px;
    width: 53px;
}
.submitButton span {
    background: transparent url(../image/style/hp_sprite.gif) no-repeat scroll -307px -42px;
    color: #FFFFFF;
    display: block;
    margin: 7px -11px 0 5px;
    padding: 5px 10px;
}
 <div onclick="save();" class="submitButton">
                            <span>
                                保存
                            </span>
                        </div>



6.background-image 和 css3 的结合:

    不晓得是什么怪胎,但天哪,我居然在自己的代码里面用它了。还好只是个 Demo。还好迫于时间的紧迫,我勉强的原谅了下我自己。



题外话:

    在这里顺便说一下 tab,感觉自己用很多不同的方法去实现 tab,不论怎么个实现法,在处理当前选中的 tab 下没没有横线是一件很头疼
的事情,感觉老是需要 image,它需要比没选中的高一个像素,这样才可以遮盖住下面的横线,等我再好好的总结下,给你一个惊喜吧。


备注:

    这应该算是自己花费心血写的一篇帖子了,很早前就打算不想再转帖了,但是看到好的文章,里面的东西又很实用,希望能和大家一起分
享,还是转了。以后会慢慢戒掉这个毛病的。哇咔咔。
其实很早前就开始准备自己写文章了,也准备了一些平时积累的集料,可是每次想发时都觉得写得太‘萎缩’了。没勇气发,可能还需要一段时间
的整理和勇气的酝酿。^^
说真的,每次看到很多人来加为我好友,关注我,就会觉得很愧疚,自己的文章大多都是转载的。要不就是翻译的,要不就是随便评价下别人的
文章,然后再转过来。。。~(@^_^@)~ 希望大家还能一如既往的支持我。O(∩_∩)O


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步