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.<div>

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

.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


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

留下你的脚步