1、CSS3圆角的优势 传统的圆角生成方案，必须使用多张图片做为背景图案。CSS3的出现，使得咱们不再必浪费时间去制做这些图片了，并且还有其余多个优势： * 减小维护的工做量。图片文件的生成、更新、编写网页代码，这些工做都再也不须要了。 * 提升网页性能。因为没必要再发出多余的HTTP请求，网页的载入速度将变快。 * 增长视觉可靠性。某些状况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，致使视觉效果不佳。CSS3就不会发生这种状况。 2、border-radius属性 CSS3圆角只需设置一个属性：border-radius（含义是"边框半径"）。你为这个属性提供一个值，就能同时设置四个圆角的半径。全部合法的CSS度量值均可以使用：em、ex、pt、px、百分比等等。 好比，下面是一个div方框： 如今设置它的圆角半径为15px： border-radius: 15px; 这条语句同时将每一个圆角的"水平半径"（horizontal radius）和"垂直半径"（vertical radius）都设置为15px。 border-radius能够同时设置1到4个值。若是设置1个值，表示4个圆角都使用这个值。若是设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。若是设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。若是设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。 border-radius: 15px 5px; border-radius: 15px 5px 25px; border-radius: 15px 5px 25px 0px; （左下角的半径为0，就变成直角了。） border-radius还能够用斜杠设置第二组值。这时，第一组值表示水平半径，第二组值表示垂直半径。第二组值也能够同时设置1到4个值，应用规则与第一组值相同。 border-radius: 15px 5px / 3px; border-radius: 15px 5px 25px / 3px 5px; border-radius: 15px 5px 25px 5px / 3px 5px 10px 15px; 3、单个圆角的设置 除了同时设置四个圆角之外，还能够单独对每一个角进行设置。对应四个角，CSS3提供四个单独的属性： * border-top-left-radius * border-top-right-radius * border-bottom-right-radius * border-bottom-left-radius 这四个属性均可以同时设置1到2个值。若是设置1个值，表示水平半径与垂直半径相等。若是设置2个值，第一个值表示水平半径，第二个值表示垂直半径。 border-top-left-radius: 15px; border-top-left-radius: 15px 5px; 4、浏览器支持 IE 九、Opera 10.五、Safari 五、Chrome 4和Firefox 4，都支持上述的border-radius属性。早期版本的Safari和Chrome，支持-webkit-border-radius属性，早期版本的Firefox支持-moz-border-radius属性。 目前来看，为了保证兼容性，只需同时设置-moz-border-radius和border-radius便可。 -moz-border-radius: 15px; border-radius: 15px; （注意：border-radius必须放在最后声明，不然可能会失效。） 另外，早期版本Firefox的单个圆角的语句，与标准语法略有不一样。 * -moz-border-radius-topleft（标准语法：border-top-left-radius） * -moz-border-radius-topright（标准语法：border-top-right-radius） * -moz-border-radius-bottomleft（标准语法：border-bottom-left-radius） * -moz-border-radius-bottomright（标准语法：border-bottom-right-radius） 5、注意事项 虽然各大浏览器都支持border-radius，可是在某些细节上，实现都不同。当四个角的颜色、宽度、风格（实线框、虚线框等）、单位都相同时，全部浏览器的渲染结果基本一致；一旦四个角的设置不相同，就会出现很大的差别。好比，下面这段代码在不一样的浏览器中，渲染结果就相差很大。 border-color: black; border-style: solid dashed; border-width: 1px 2px 3px; border-top-color: red; border-radius: 5%; 另外，并不是全部浏览器，都支持将圆角半径设为一个百分比值。 这是一个好看的按钮 <style type="text/css"> .css_btn_class { font-size:14px; font-family:Arial; font-weight:normal; -moz-border-radius:42px; -webkit-border-radius:42px; border-radius:42px; border:1px solid #dcdcdc; padding:9px 18px; text-decoration:none; background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ededed), color-stop(100%, #dfdfdf) ); background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% ); background:-ms-linear-gradient( top, #ededed 5%, #dfdfdf 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf'); background-color:#ededed; color:#777777; display:inline-block; text-shadow:1px 1px 0px #ffffff; -webkit-box-shadow:inset 1px 1px 0px 0px #ffffff; -moz-box-shadow:inset 1px 1px 0px 0px #ffffff; box-shadow:inset 1px 1px 0px 0px #ffffff; }.css_btn_class:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #dfdfdf), color-stop(100%, #ededed) ); background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% ); background:-ms-linear-gradient( top, #dfdfdf 5%, #ededed 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed'); background-color:#dfdfdf; }.css_btn_class:active { position:relative; top:1px; } /* This css button was generated by css-button-generator.com */ </style> 先试看这是一个好看的按钮！ 用css写一个好看的圆形框！ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #round { padding:10px; width:300px; height:50px; border: 5px solid #dedede; -moz-border-radius: 15px; /* Gecko browsers */ -webkit-border-radius: 15px; /* Webkit browsers */ border-radius:15px; /* W3C syntax */ </style> </head> <body> <div id="round"></div> </body> </html> 国外有个好的按钮网站，有源代码，写好了多种的按钮和圆形框。 http://css-button-generator.com/