技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> CSS圆角制作

CSS圆角制作

浏览:3115次  出处信息

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. 手机UI设计基础-尺寸&单位    (阅读：3417)
  2. jQuery边框圆角插件：DivCorners    (阅读：2643)
  3. 记录用户体验细节    (阅读：2409)
  4. CSS3圆角详解    (阅读：2229)
  5. 圆角头像的重构优化    (阅读：2159)
  6. 自适应圆角    (阅读：2143)
  7. 小心别让圆角成了你列表的帧数杀手    (阅读：1811)
  8. iOS可视化编程 Tips 之“无需代码设置圆角”    (阅读：2068)
  9. 为UIView任意角设置圆角    (阅读：1587)
  10. -webkit-border-radius圆角属性    (阅读：1034)
QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：CSS两列流式布局
后一篇：CSS图片替换 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1