IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者
首页 / 前端

CSS圆角制作

RockUX | WEB、前端、JavaScript、PHP 2011-06-02 13:15:02 累计浏览 4,351 次
本机暂存
标签 CSS CSS Sprites HTML

CSS圆角在很多网页设计中都有使用，他的实现方法也有很多种，我们这次主要使用一个单张的图片来达到实现圆角的一个目的。也练习一下CSS Sprites的使用。

例子

点击这里，可以查看例子。

图片

我们需要一张图片来制作圆角的边框。

round corner

HTML代码

HTML的结构比较简单，容器的每一个圆角需要一个额外的span标签。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head><title>CSS Rounded Corners Revisted</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<span class="tl"></span><span class="tr"></span>
<h1>CSS Rounded Corners Revisted</h1>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tristique venenatis ligula. Ut massa leo, tincidunt sit amet, tincidunt nec, volutpat ac, lorem. Integer odio. Donec tempus. Nam vestibulum lectus ut pede. Donec mattis nunc et quam. Duis ipsum eros, interdum eu, auctor gravida, rhoncus sit amet, odio. Curabitur sit amet urna. Quisque et sem. Sed laoreet purus quis risus.
</p>
<p>
Vivamus elit. Mauris odio felis, bibendum eu, eleifend non, rutrum in, tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed malesuada sapien sit amet risus fringilla nonummy. Praesent laoreet tristique sem. Vestibulum venenatis congue lacus. Etiam volutpat, lacus sit amet eleifend posuere, purus leo bibendum nulla, sit amet vulputate nisi elit at ante. Nulla luctus, eros id tempus vestibulum, velit quam suscipit arcu, id tempus tortor felis et ante. Donec bibendum dapibus mi. Integer nunc. Donec nonummy, turpis non posuere tempor, libero magna semper ante, in egestas erat odio pharetra metus. Vivamus semper fringilla felis. Morbi ultrices sapien nec odio. Fusce vitae lectus. Proin feugiat, ipsum quis accumsan feugiat, diam dui vestibulum arcu, nec vehicula leo nisl tincidunt lorem. Donec sit amet ante eu lorem aliquet scelerisque. Suspendisse erat mauris, semper ut, pharetra ac, ultrices id, sapien. Cras enim. Fusce velit.
</p>
<span class="bl"></span><span class="br"></span>
</div>
</body>
</html>

CSS代码

首先是一些通用的样式：

1
2
3
4
5
6
7
8
9
10
11
12
 
* {
padding: 0;
margin: 0;
}
html {
overflow-y: scroll; /* scrollbar fix */
}
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 100%;
padding: 10px;
}

然后我们给容器设置背景色和font-size，我们需要浮动着几个圆角框，所以需要overflow:hidden来清除浮动，而且也要通过这个给IE6应用hasLayout：

1
2
3
4
5
6
7
8
 
#container {
background-color: #247CBA;
font-size: 0.75em;
overflow: hidden;
}
* html #container {
height: 1%;
}

在我们真正处理圆角之前，还需要给内容元素留一些空白，设置10px的padding，刚好跟我们的圆角的半径也一样。

1
2
3
4
5
6
7
8
 
#container h1 {
font-size: 1.7em;
clear: both;
padding: 0 10px;
}
#container p {
padding: 0 10px 1em;
}

现在一切就绪了，我们可以开始添加圆角框了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
.tl {
background-image: url(circle.gif);
width: 10px;
height: 10px;
float: left;
font-size: 0;
}
.tr {
background-image: url(circle.gif);
background-position: 10px 0px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}
.bl {
background-image: url(circle.gif);
background-position: 0px 10px;
width: 10px;
height: 10px;
float: left;
font-size: 0;
}
.br {
background-image: url(circle.gif);
background-position: 10px 10px;
width: 10px;
height: 10px;
float: right;
font-size: 0;
}

参考Hiro同学的代码，可以将上面代码修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
.tl, .tr, .bl, .br {
background-image: url(circle.gif);
width: 10px;
height: 10px;
}
.tl, .bl {
float: left;
}
.tr, .br {
float: right;
}
.tr {
background-position: 10px 0px;
}
.bl {
background-position: 0px 10px;
}
.br {
background-position: 10px 10px;
}

这四个样式应用到HTML结构中的四个span，每一个都有相同搞定背景图片，有相同的宽度和高度。

font-size:0用来修正IE6的BUG。

这个方法的技巧在于使用background-position。通过使用不同的值来让背景图片显示不同的位置，这样节省了流量，而且制作也方便一些。

总结

使用这个办法，你就不需要在PS里面把一个图切成好几块了，而且总体大小也会比较小，尤其是你在网站中使用很多的圆角的时候。

同分类推荐文章

  1. translateZ() （2026-06-25 21:18:56）
  2. translateY() （2026-06-25 21:17:56）
  3. translateX() （2026-06-25 21:16:01）

查看更多 前端 文章 →

建议继续学习

  1. SmartSprites - 命令行形式的CSS Sprites生成器 （累计阅读 123,894）
  2. 50个活力和动感的网页设计－颜色的灵感 （累计阅读 34,442）
  3. 视觉设计前瞻实用性研究（PNVD） 第二期 （累计阅读 12,977）
  4. 各公司对前端开发的职位描述 （累计阅读 10,405）
  5. iframe大小自适应 （累计阅读 10,057）
  6. 浏览器的渲染原理简介 （累计阅读 8,377）
  7. 解决IE6从Nginx服务器下载图片不Cache的Bug （累计阅读 8,357）
  8. iframe里src="about:blank"的问题。 （累计阅读 8,088）
  9. 程序员眼里IE浏览器是什么样的 （累计阅读 8,011）
  10. 2010网页设计趋势 （累计阅读 7,818）