如何更方便的创建CSS3圆角-css3常用圆角总结

CSS3是样式表（style sheet）语言的最新版本，它的一大优点就是支持圆角。以前做圆角都是用图片拼接而成，如果你还是停留在那个阶段，我只能说你太落后了，现在用CSS3打造的圆角有这么几个特点：提高网页性能。，网页的载入速度将变快，因为你不用加载多余图片自然就快了，增加视觉可靠性。某些情况下（网络拥堵、服务器出错、网速过慢等等），背景图片会下载失败，导致视觉效果不佳。CSS3就不会发生这种情况；

下面是我开发当中总结的几种CSS3圆角技术，这些是最基本的代码，以后再遇到类似的问题你可以使用它来实现

1. css3 最简单的边框圆角

1. Rounded Corners by 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 的阴影

2. Rectangle Shadow by 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边框效果

3. Rounded Corners by CSS3

在这里我们用css3打造边框图像属性，为边框加上图像效果

border image

<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>
posted @ 2012-11-16 11:32  花香常漫  阅读(3452)  评论(4)  编辑  收藏  举报