CSS圆角制作

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

例子

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

图片

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

CSS圆角制作

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里面把一个图切成好几块了,而且总体大小也会比较小,尤其是你在网站中使用很多的圆角的时候。

xiaotmh
  • 版权声明: 本文源自互联网, 于7个月前,由整理发表,共 3233字。
  • 原文链接:点此查看原文

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: