如何更方便的创建CSS3圆角-css3常用圆角总结
CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。以前做圆角都是用图片拼接而成，如果你还是停留在那个阶段，我只能说你太落后了，现在用CSS3打造的圆角有这么几个特点：提高网页性能。，网页的载入速度将变快，因为你不用加载多余图片自然就快了，增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况；
下面是我开发当中总结的几种CSS3圆角技术，这些是最基本的代码，以后再遇到类似的问题你可以使用它来实现
1. css3 最简单的边框圆角
最简单的方法实现的基本CSS3圆角，希望这个 CSS3 技术可以对您在前端开发中任何时候都更有帮助。
css代码如下
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>css边框圆角</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6 #rounded-corners { 7 margin: 50px auto; 8 width:500px; 9 color:#fff; 10 padding:5px; 11 text-align:center; 12 font-size:20px; 13 background:#21759b; 14 border:2px solid; 15 border-radius:25px; -moz-border-radius:25px; 16 } 17 </style> 18 19 </head> 20 21 <body> 22 23 <div id="rounded-corners">css3 最简单的边框圆角</div> 24 25 </body>
2. 矩形的 CSS3 的阴影
在开发当中我们经常用到矩形带阴影效果，光是矩形效果还好说，带着阴影的话就不好弄了，其实实现也简单，下面是具体的代码
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3边框效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #rectangle-shadow { box-shadow: 10px 10px 5px #888888; width:500px; padding:5px; text-align:center; font-size:20px; background:#21759b; margin:0 auto; color:#ffffff; } </style> </head> <body> <div id="rectangle-shadow">矩形的 CSS3 的阴影</div> </body> </html>
3. 使用图像的CSS3边框效果
在这里我们用css3打造边框图像属性，为边框加上图像效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS3边框效果</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> #border-image { border-image:url(border.png) 30 30 round; -moz-border-image:url(image-border.png) 30 30 round; /* Firefox */ -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ -o-border-image:url(border.png) 30 30 round; /* Opera */ width:500px; padding:5px; text-align:center; font-size:20px; margin:40px auto; color:#21759b; } </style> </head> <body> <div id="border-image">图像边框</div> </body> </html>
关于 我
