CSS3的border-radius规范

最新草案中其主要信息如下：

1. 属性：border-top-right-radius
　　　border-bottom-right-radius
　　　border-bottom-right-radius
　　　border-bottom-right-radius
   值：<length> <length>?。它们分别是定义角形状的四分之一椭圆的两个半径。如图：
   
   1. 第一个值是水平半径。
   2. 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
   3. 如果任意一个值为0，则这个角是矩形，不会是圆的。
   4. 值不允许是负值。
2. 属性：border-radius。它是上面四个属性值的简写。
   值：<length>{1,4} [ / <length>{1,4} ]?
   1. 如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半径。如果没有斜线，则水平半径和垂直半径相等。
   2. 四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略，那么它等于top-right。如果bottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。
3. 应用范围：所有的元素，除了table的样式属性border-collapse是collapse时
4. 内边半径等于外边半径减去对应边的厚度。当这个结果是负值时，内边半径是0。所以内外边曲线的圆心并不一定是一致的。
5. border-radius也会导致该元素的背景也是圆的，即使border是none。如果background-clip是padding-box，则背景（background）会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
6. 所有的边框样式（solid、dotted、inset等）都遵照角的曲线。如果设置了border-image，则曲线以外的部分会被裁剪掉。
7. 如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
8. 两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
9. 角不允许相互重叠，所以当相邻两个角半径的和大于所在矩形区域的大小时，用户代理（浏览器）比如缩小一个或多个角半径。运算法则如下：f = min(L_i/S_i)，i ∈ {top, right, bottom, left}，L_top = L_bottom = 所在矩形区域的宽，L_left = L_right = 所在矩形区域的高。如果f < 1，那么所有角半径都乘以f。

浏览器支持

实际中，目前没有任何一款浏览器支持这个属性，只有部分浏览器利用其私有属性支持部分实现：

1. Firefox对border-radius的支持：

   -moz-border-radius: <length>{1,4} | inherit
   -moz-border-radius-bottomleft : <length> | inherit
   -moz-border-radius-bottomright  : <length> | inherit
   -moz-border-radius-topleft  : <length> | inherit
   -moz-border-radius-topright : <length> | inherit
   

   1. 只对每个角设置一个半径，只支持实现四分之一圆角，并不支持椭圆形圆角。
   2. 具体每个角的命名规则也和W3C不一致，这个比较讨厌。
   3. Firefox3圆角已经相当圆滑了，Firefox2比较糟糕，好在它即将终结了。
2. Safari和Chrome对border-radius的支持：

   -webkit-border-radius: <length>{1,2} | inherit
   -webkit-border-bottom-left-radius : <length>{1,2} | inherit
   -webkit-border-bottom-right-radius : <length>{1,2} | inherit
   -webkit-border-top-left-radius  : <length>{1,2} | inherit
   -webkit-border-top-right-radius : <length>{1,2} | inherit
   

   1. 每个属性有1个或2个值，当有两个值时1个表示水平半径，一个表示垂直半径（当writing-mode改变也随之而变）。所以，Safari和Chrome中的圆角可以是椭圆角。
   2. webkit的实现方法和W3C的CSS3草案2005年版本非常一致，和当前的草案最大不同就是简写属性-webkit-border-radius的属性值也只有1个或2个值，意义和前面相同。
   3. Chrome中圆角锯齿比较严重，基本上和Firefox2是同一水平，或许是它的webkit版本较低造成的。
   4. 由于webkit出生于khtml，所以把 上面属性中的webkit换成khtml即会得到以khtml为核心的浏览器支持的属性了。
   5. 当相邻的角半径之和大于所在矩形区域的大小时，都会直接设置所有的角半径为0，即圆角失效，而不会像Firefox那样同比率缩小。
3. Opera尚不支持border-radius，虽然Opera10 alpha拥有众多的CSS3改进，但是依旧看不到对其支持的希望。
4. IE就不用说了，标准的不支持了。从MSDN的CSS Compatibility and Internet Explorer中可以看出IE8已经铁定不支持了。

实际应用

最简单的应用就是支持的用圆角，不支持的用方角。比如Wordpress2.7的后台、雅虎口碑UED的blog和今天你带伞了吗?。基础代码如下：

border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;

实现请看演示实例。

利用VML可以实现从IE5-7的圆角，但是貌似IE8不支持VML了。组件DD_roundies就是综合以上解决方案的一个具体应用。说实话这样实现出来的圆角也比较粗糙了，我感觉还不如不要。

像VML一样，Canvas也能实现圆角，切除了IE外，所有的主流浏览器都支持。所以就有了两者结合实现的组件Cornerz。

如果上面的现实太痛苦，而又非要用圆角的话，要么一个像素一个像素去拼装，比如Chunky Borders；要么就老老实实用图片来实现吧，比如CSS Mojo的方式。

在CSS3草案中，对文本的处理新增了两个新属性word-wrap和word-break来解决这个问题：

1. {word-break:break-all;} ：依照亚洲语言和非亚洲语言的文本规则，允许在字内换行，且允许非亚洲语言文本行的任意字内断开
2. {word-wrap:break-word;}： 内容将在边界内换行，如需要则词内换行（word-break）也行发生

下面是常见浏览器的支持情况：

• [1] 在MSDN的CSS Compatibility and Internet Explorer中可以看出，IE8会像IE6和IE7一样支持word-wrap和word-break这两个属性，但我在IE8beta2上测试来看却不支持这两项，由于IE8还处于beta阶段，且我相信IE8最终会支持的，所以在页头声明<meta content="IE=7" http-equiv="X-UA-Compatible" />使IE8按照IE7来解释页面是一个不错的办法。IE8正式版支持
• [2] Firefox3.1将会支持word-wrap属性Firefox3.5beta4已经支持

由于{word-break:break-all;}导致英文和数字可读性严重下降且无法使连续符号换行，所以{word-wrap:break-word;}是一个相对较好的选择。需要注意的是各个浏览器中word-wrap在td上实现不一致，所以避免直接在td上使用。

但面对浏览器的如此糟糕支持，所以不能不借助JavaScript来解决这个问题，即当浏览器不支持CSS解决方案时，在连续字符串的适当位置插入&#8203;字符（当然还可以用<wbr />和&shy;，这三个字符在浏览器中的支持情况请看ppk的《The wbr tag》），这些字符写在浏览器中不会显示，却使长字符串换行。&#8203;和&shy;都会导致复制用其处理过的文本时有大量不可打印的字符，导致字符数急剧增大，更严重的是导致复制的链接字符串不可用，所以用<wbr />是比较好的方案，虽然<wbr />在IE8中不被支持且在Safari中有bug，但这些浏览器可以直接用CSS{word-wrap:break-word}来实现无需用<wbr />处理。Opera下要兼容<wbr />，需要设置CSS：wbr:after { content: "\00200B" }。

2009.05.28重写了实现方法，尽可能减少对浏览器探测的依赖，同时考虑对同一个页面多次执行该方法的效率，同时为了偷懒直接基于YUI。请看DEMO

具体实现代码如下：

function fnBreakWordAll(o){
var o = o || {},
  iWord = o.word || 13,
  iRe = o.re || '[a-zA-Z0-9]',
  bAll = o.all || false,
  sClassName = o.className || 'word-break-all',
  aEls = o.els || (function(){
    var aEls = [],
      aAllEls = document.getElementsByTagName('*'),
      re = new RegExp('(?:^|\\s+)' + sClassName + '(?:\\s+|$)');
    for(var i =0,iLen = aAllEls.length; i < iLen ; ++i){
      if(re.test(aAllEls[i].className)){
        aEls[aEls.length] = aAllEls[i];
      }
    }
    return aEls;
  })() || [],
  fnBreakWord = function(oEl){
    // 基于http://www.hedgerwow.com/360/dhtml/css-word-break.html修改
    if(!oEl || oEl.nodeType !== 1){
      return false;
    }else if(oEl.currentStyle && typeof oEl.currentStyle.wordWrap==='string'){
      breakWord = function(oEl){
        oEl.runtimeStyle.wordWrap = 'break-word';
        return true;
      }
      return breakWord(oEl);
    }else if(document.createTreeWalker){
      var trim = function  (str) {
        str = str.replace(/^\s\s*/, '');
        var ws = /\s/,
        i = str.length;
        while (ws.test(str.charAt(--i)));
        return str.slice(0, i + 1);
      }
      breakWord = function(oEl){
        var dWalker=document.createTreeWalker(oEl,NodeFilter.SHOW_TEXT,null,false);
        var node,s,c = String.fromCharCode('8203'),
          //re = /([a-zA-Z0-9]{0,13})/;
          re = new RegExp('('+ iRe +'{0,' + iWord + '})');
        while (dWalker.nextNode()){
          node = dWalker.currentNode;
          s = trim(node.nodeValue).split(re).join(c);
          node.nodeValue = s;
        }
        return true;
      }
      return breakWord(oEl);
    }
  };
for(var i=0,n=aEls.length; i<n; ++i){
  var sUa = navigator.userAgent,
    sTn = aEls[i].tagName.toLowerCase() ;
  if((/Opera/).test(sUa) || (/Firefox/).test(sUa) || ((/KHTML/).test(sUa) &&
  (sTn === 'td' || sTn === 'th')) || bAll){
    fnBreakWord(aEls[i]);
  }
}
}

具体应用请看演示实例

fnWordBreakAll函数提供一些定制参数，使用方法和参数含义如下：

fnWordBreakAll({word:15,re:'[\\w]',all:true});

这个函数的核心部分修改自Hedger Wang 整理了一个JavaScript解决方案《Cross Browser Word Breaker》，其利用document.createTreeWalker和split方法给非IE浏览器的每个字符间加入了&#8203;，它用在纯中文文本基本上没有什么问题，但是如果你仔细观察他给出的例子就会发现文本中有英文或数字时，虽然解决了换行问题，但是使文本难以阅读，且增大了字符间的间距，所以我在此基础上做了上面的改进。