您的位置：首页 > Web前端 > CSS

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

2012-11-16 11:32 330 查看

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

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

1. css3 最简单的边框圆角

最简单的方法实现的基本CSS3圆角，希望这个 CSS3 技术可以对您在前端开发中任何时候都更有帮助。

css代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css边框圆角</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#rounded-corners {
margin: 50px auto;
width:500px;
color:#fff;
padding:5px;
text-align:center;
font-size:20px;
background:#21759b;
border:2px solid;
border-radius:25px; -moz-border-radius:25px;
}
</style>

</head>

<body>

<div id="rounded-corners">css3 最简单的边框圆角</div>

</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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航