作者:李丽媛

邮箱：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 ，然后把height 和width 设置为你左边圆角的高度和宽度。
        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>

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



6.background-image和css3的结合：
    不晓得是什么怪胎，但天哪，我居然在自己的代码里面用它了。还好只是个Demo。还好迫于时间的紧迫，我勉强的原谅了下我自己。



题外话：

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


备注：

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