App下載

CSS3 border-radius(圓角)效果在線調(diào)試工具

　這是一款可在線調(diào)試并預(yù)覽CSS3 border-radius(圓角)效果的工具。右側(cè)具有實(shí)時(shí)調(diào)試并顯示預(yù)覽效果的功能，同時(shí)能夠?qū)崟r(shí)生成對(duì)應(yīng)的css3效果代碼，方便需要的朋友使用。


效果設(shè)置區(qū)

四角同時(shí)設(shè)置

四角分別設(shè)置

效果預(yù)覽區(qū)

代碼區(qū)

說(shuō)明

Safari Firefox 3.5 Opera 10.5 Chrome Internet Explorer

  • border-radius:長(zhǎng)度
  • Firefox支持border-radius(圓角)：-moz-border-radius:2px;
  • webkit內(nèi)核的Safari和Chrome支持border-radius(圓角)：-webkit-border-radius:2px;
  • Opera支持border-radius(圓角)：box-shadow:2px;
  • IE不支持Box Shadow(陰影)

我們還可以隨意指定圓角的位置，左上、左下、右上、右下四個(gè)方向。在firefox、webkit內(nèi)核的Safari和Chrome和opera（css3）、中的具體書(shū)寫(xiě)格式如下：
-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

border-radius(圓角)還有其他一些用法，F(xiàn)irefox、webkit內(nèi)核的Safari和Chrome和opera（css3）其他寫(xiě)法有些略微的差異，具體可以查看以下網(wǎng)址： https://developer.mozilla.org/en/CSS:-moz-border-radius
http://www.the-art-of-web.com/css/border-radius/
http://dancewithnet.com/2008/12/27/border-radius-and-rounded-corner/