从零开始学CSS3

Author Avatar
MagicDo 6月 02, 2017
  • 在其它设备中阅读本文章

背景、边框和补丁

除了字体、文本相关属性之外,HTML网页上最常用的CSS属性应该就是背景和边框相关属性了。通过使用背景,可以为HTML控件增加各种各样的背景颜色、背景图片;通过边框相关属性,可以为HTML控件增加各种颜色、各种线性、粗细不等的边框。

背景相关属性

背景相关属性用于控制背景色、背景图片等属性。在控制背景图片的同时,还可控制背景图片的排列方式。有如下几个常用的背景相关属性。

  • background:设置对象的背景样式。该属性是一个复合属性,可用于同时设置背景色、背景图片、背景重复模式等属性。为了更好的控制背景,一般不建议通过该属性来控制背景。
  • background-attachment:设置背景图片是随对象内容滚动还是固定的。在指定该属性之前,必须先指定background-image属性。该属性有如下两个值:

1.scrool:指定背景图片会随组件里的内容的滚动而滚动。这是默认值

2.fixed:背景图片固定,不会随组件里的内容的滚动而滚动。

  • background-color:用于设置背景色。如果同时设置了背景色和背景图片,则背景图片将覆盖背景色。
  • background-image:用于设置背景图片。如果同时设置了背景色和背景图片,则背景图片将覆盖背景色。该属性需要使用url()函数指定图片地址,图片地址既可以是相对地址,也可以是绝对地址。
  • background-position:用于设置对象背景图片的位置。该属性,应该是两个值。他们既可是实际的长度值,也可是百分比。如果只指定了一个值,该值将对应横坐标。
    纵坐标将默认为50%;如果指定了两个值,那么第二个值将对应纵坐标。在指定该属性之前,必须指定background-image属性。
  • background-repeat:适用于CSS1,用于设置对象的背景图片是否平铺。在指定该属性之前,必须现指定background-iamge属性。该属性有repeat、no-repeat、repeat-x,repeat-y 4个值,分别对应在纵向和横向同时平铺、不平铺、仅在横向平铺、仅在纵向平铺。

示例:

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
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background</title>
<style type="text/css">
div{
border:1px solid #000;
height: 50px;
width: 200px;
}
</style>

</head>
<body>
<!-- 灰色背景 -->
background-color: #aaa;
<div style="background-color: #aaa">测试文字</div>
<!-- 以默认样式指定背景图片,将会在横向、纵向上平铺 -->
background-image: url(wjc.gif);
<div style="background-image: url(wjc.gif);">测试文字</div>
<!-- 不平铺的背景图片 -->
background-image: url(wjc.gif); background-repeat: no-repeat;
<div style="background-image: url(wjc.gif); background-repeat: no-repeat;">测试文字</div>
<!-- 仅横向平铺的背景图片 -->
background-image: url(wjc.gif);background-repeat: repeat-x;
<div style="background-image: url(wjc.gif);background-repeat: repeat-x;">测试文字</div>
<!-- 不平铺,并锁定图片位置 -->
background-image: url(wjc.gif);background-repeat: no-repeat;background-position: 35% 80%
<div style="background-image: url(wjc.gif);background-repeat: no-repeat;background-position: 35% 80%">测试文字</div>
<!-- 不平铺,并锁定图片位置 -->
background-image: url(wjc.gif);background-repeat: no-repeat;background-position: 30px 8px
<div style="background-image: url(wjc.gif);background-repeat: no-repeat;background-position: 30px 8px">测试文字</div>
<!-- 不平铺,并锁定图片位置 -->
background-image: url(wjc.gif);background-repeat: no-repeat;background-position: center bottom
<div style="background-image: url(wjc.gif);background-repeat: no-repeat;background-position: center bottom;">测试文字</div>
</body>
</html>

背景图片固定

在默认情况下,组件里的背景图片会随滚动条而滚动,但如果把background-attachment属性设置为fixed,那么背景图片就会被固定在该组件中。不会随着滚动条的滚动而滚动。
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-attachment</title>
<style type="text/css">

</style>

</head>
<body style="background-image: url(wjc.gif);background-attachment: fixed;">
<ul style="font-size:30pt;">
<script type="text/javascript">
for (var i = 0; i < 15; i++) {
document.writeln("<li>苏菲的世界<li>");
}
</script>

</ul>
</body>
</html>

CSS3新增的背景相关属性

  • background-clip:该属性用于设置背景覆盖的范围。
  • background-origin:该属性用于设置背景覆盖的起点。该属性与前面介绍的backgroud-position有些类似
  • background-size:该属性用于设置背景图片的大小。该属性由两个值组成,分别代表图片的宽度、高度。宽度和高度支持下面3种写法:长度值(20px)百分比(80%)auto(指定背景图片保持纵横比缩放)

对于一个HTML组件来说,它由元素内容区(content)、内补丁区(padding)、边框区(border)和外补丁区(margin)组成。

在CSS2中,元素的背景覆盖区为内补丁区(padding)和内容区(content);在CSS3中则可以指定背景需要覆盖哪个范围。背景覆盖的范围由background-clip属性指定,该属性支持如下几个属性值。

  • border-box:指定背景覆盖边框区(border)内补丁区(padding)和内容区(content)
  • no-clip:指定背景覆盖边框区(border)、内补丁区(padding)、内容区(content)
  • padding-box:指定背景覆盖内补丁区(padding)、内容区(content)
  • content-box:指定背景只覆盖内容区(content)

示例代码:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-clip</title>
<style type="text/css">
div{
border: 10px dotted #444;
padding: 12px;
height: 30px;
width: 200px;
}
</style>

</head>
<body>
background-image: url(wjc.gif);
<div style="background-image: url(wjc.gif);">测试文字</div>
background-image: url(wic.gif);background-clip: no-clip;
<div style="background-image: url(wic.gif);background-clip: no-clip;">测试文字</div>
background-image: url(wic.gif);background-clip: padding-box;
<div style="background-image: url(wic.gif);background-clip: padding-box;">测试文字</div>
background-image: url(wic.gif);background-clip: content-box;
<div style="background-image: url(wic.gif);background-clip: content-box;">测试文字</div>
</body>
</html>

从上面示例看出,只有当省略background-clip属性或者指定background-clip属性为no-clip时,背景图片才会覆盖边框区。

与此类似,background-origin属性用于指定背景从哪里覆盖,可以指定如下几个属性值。

  • border:指定背景图片从边框区开始覆盖
  • padding:指定背景图片从内补丁区开始覆盖
  • content:指定背景图片从内容区开始覆盖
    需要指出的是Firefox、Opera的最新版本暂不支持该属性,在chrome、Safari中使用该属性需要把属性写成-webkit-background-origin.

在CSS3以前,当我们为HTML元素设置背景图片时,该图片铺到该组件上,图片大小总是该图片的原始大小。CSS3的出现改变了这种现状,background-size属性可控制背景图片的大小。

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size</title>
<style type="text/css">
div{
border: 1px solid #000;
height: 50px;
width: 200px;
}
</style>

</head>
<body>
background-image: url(wjc.gif);
<div style="background-image: url(wjc.gif);"></div>
background-image: url(wjc.gif); -webkit-background-size:100% 80%;background-size: 100% 80%
<div style="background-image: url(wjc.gif); -webkit-background-size:100% 80%;background-size: 100% 80%"></div>
background-image: url(wjc.gif); -webkit-background-size:20% auto;background-size: 20% auto
<div style="background-image: url(wjc.gif); -webkit-background-size:20% auto;background-size: 20% auto"></div>
background-image: url(wjc.gif); -webkit-background-size:auto 50%;background-size: auto 50%
<div style="background-image: url(wjc.gif); -webkit-background-size:auto 50%;background-size: auto 50%"></div>
background-image: url(wjc.gif); -webkit-background-size:60px 30px;background-size: 60px 30px
<div style="background-image: url(wjc.gif); -webkit-background-size:60px 30px;background-size: 60px 30px"></div>
background-image: url(wjc.gif); -webkit-background-size:40px auto;background-size: 40px auto
<div style="background-image: url(wjc.gif); -webkit-background-size:40px auto;background-size: 40px auto"></div>
background-image: url(wjc.gif); -webkit-background-size:auto 20px;background-size: auto 20px
<div style="background-image: url(wjc.gif); -webkit-background-size:auto 20px;background-size: auto 20px"></div>
</body>
</html>

CSS3新增的多背景图片

在CSS3以前,每个组件只能指定一种背景图片,如果同时指定背景颜色和背景图片,那么,背景图片会覆盖背景颜色。CSS3允许指定多个背景图片,这些背景图片会依次覆盖。多背景图片依然是通过background-image、background-repeat、background-position、background-size等属性来控制的。只是CSS3允许指定多个属性值(多个属性值之间以英文逗号隔开),这样即可实现多背景图片的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>muiti-back</title>
<style type="text/css">
div#div1{
border: 1px solid #000;
height: 160px;
width: 500px;
background-image: url(snow.gif),url(face.gif),url(sky.gif);
background-repeat: repeat-y,repeat-x,repeat;
background-position: center top,left center,left top;
}
</style>

</head>
<body>
<div id="div1"></div>
</body>
</html>

边框相关属性

边框相关属性用于设置目标对象的边框特征,包括颜色、粗细,以及使用的线型。边框相关属性有如下几个。

  • border:这是一个复合属性,用于设置目标组件的边框样式。可同时设置边框的粗细、线型、颜色。
  • border-color:用于设置组件的边框颜色。如果提供4个参数值,则将用于设置4个biankuang的颜色。如果提供两个参数值,则第一个用于设置上下两个边框的颜色。第二个用于设置左右两个边框的颜色。如果提供3个参数值,则第一个用于设置上边框的颜色。第二个用于设置左右两个边框的颜色,第三个用于设置下边框的颜色。
  • border-style:用于设置组件的边框线型。如果提供4个参数值,则将按上右下左的顺序一次设置4个边框的线型;如果只提供一个参数值,则将用于设置4个边框的线型;如果提供两个参数值,则第一个用于设置上下两个边框的线型,第二个用于设置左右两个边框的线型;如果提供3个参数值,则一个用于设置上边框的线型,第二个用于设置左右两个边框的线宽,第三个用于设置下边框的线宽。
  • border-top:这是一个复合属性,用于设置目标组件的上边框样式。同时可设置边框的粗细、线型、颜色。
  • border-top-color:用于设置目标组件的上边框颜色。
  • border-top-style:用于设置目标组件上边框的线型。
  • border-style-width:用于设置目标组件上边框的线宽
  • border-right:这是一个复合属性,用于设置目标组件的右边框样式。可同时设置右边框的粗细、线型、颜色
  • border-right-color:用于设置目标组件的右边框颜色
  • border-right-style:用于设置目标组件右边框的线型
  • border-right-width:用于设置目标组件右边框的线宽
  • border-bottom:这是一个复合属性,用于设置目标组件下边框的样式。可同时设置边框的粗细、线型、颜色
  • border-bottom-color:用于设置目标组件下边框的颜色。
  • border-bottom-style:用于设置目标组件下边框的线型。
  • border-bottom-width:用于设置目标组件的左边框的线宽。
  • border-left:这是一个复合属性,用于设置目标组件左边框的样式。可同时设置边框的粗细、线型、颜色
  • border-left-color:用于设置目标组件左边框的颜色。
  • border-left-style:用于设置目标组件左边框的线型。
  • border-left-width:用于设置目标组件的左边框的线宽。

在上面的边框相关属性中,边框颜色可以是任何有效的颜色值,而线宽可以是任何有效的长度值,线型可以支持如下值。

  • none:无边框
  • hidden:隐藏边框
  • dotted:点线边框
  • dashed:虚线边框
  • solid:实线边框
  • double:双线边框
  • groove:3D凹槽边框
  • ridge:3D凸槽边框
  • inset:3D凹入边框
  • outset:3D凸出边框

示例代码:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border</title>
<style type="text/css">
div{
width: 300px;
height: 40px;
}
</style>

</head>
<body>
<div style="border: 5px solid #666">宽度为5的灰色实线边框</div><br/>
<div style="border: 2px dashed #666">宽度为2的灰色虚线边框</div><br/>
<div style="border: 2px dotted #666">宽度为2的灰色点线边框</div><br/>
<div style="border: 5px groove #666">宽度为5的灰色凹槽边框</div><br/>
<div style="border: 8px inset #666">宽度为8的灰色凹入边框</div><br/>
<div style="border: 8px outset #666">宽度为8的灰色凸出边框</div><br/>
<div style="border-width: 8px 2px;border-style: solid dashed; border-color: #ccc #444">
上下两个边框样式为 8px solid #ccc<br/>
左右两个边框样式为 2px dashed #444
</div><br/>
<div style="border-width: 8px;border-style: solid;border-color: #ccc #ccc #444 #444">四个边框颜色不同做出立体效果</div>
</body>
</html>

CSS3提供的渐变边框

CSS3提供了如下4个属性来支持渐变边框

  • border-top-colors:该属性用于设置目标组件上边框的颜色。如果设置上边框的宽度是Npx,那么就可以为该属性设置N种颜色,每种颜色1px的宽度。但如果设置的颜色数量小于边框的宽度,那么最后一个颜色将会覆盖该边框剩下的宽度。
  • border-rigtht-colors:该属性用于设置右边框颜色。含义同上边框
  • border-bottom-colors:该属性用于设置下边框颜色。含义同上边框
  • border-left-colors:该属性用于设置左边框颜色。含义同上边框

目前四个属性只有firefox浏览器才支持,而且使用该属性必须在前面增加-moz-前缀

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 300px;
height: 40px;
}
</style>

</head>
<body>
<div style="border: 10px solid white;
-moz-border-bottom-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;
-moz-border-top-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;
-moz-border-left-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;
-moz-border-right-colors:#555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee;">
</div>

</body>
</html>

CSS3提供的圆角边框

CSS3为支持圆角边框提供了如下属性。

border-radius:该属性用于指定圆角边框的圆角半径(半径越大,圆角的程度越大)。如果该属性指定一个长度,则4个圆角都使用该长度作为半径;如果指定2个长度,则第一个长度作为左上角、右下角半径,第二个作为右上角、左下角的半径;如果指定3个长度,则第一个长度将作为左上角的半径,第二个将作为右上角、左下角的半径,第三个作为右下角的半径

  • border-top-left-radius:该属性用于指定左上角的圆角半径。
  • border-top-right-radius:该属性用于指定右上角的圆角半径。
  • border-bottom-right-radius:该属性用于指定右下角的圆角半径
  • border-bottom-left-radius:该属性用于指定左下角的圆角半径

示例代码:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>border-radius</title>
<style type="text/css">
div{
width: 300px;
height: 60px;
}
</style>

</head>
<body>
<div style="border: 3px solid black;border-radius: 20px;">半径为20px的圆角边框</div><br/>
<div style="border:3px dotted black;border-radius: 20px">半径为20px的圆角边框</div><br/>
<div style="background-color: #aaa;border-radius: 20px">半径为20px的圆角边框(不显示边框)</div><br/>
<div style="border: 3px solid black;border-radius: 16px 40px;">半径为16px 40px的圆角边框</div><br/>
<div style="border:3px solid black;border-radius: 10px 20px 30px;">半径为10px 20px 30px 的圆角边框</div><br/>
<div style="border:3px solid black;border-radius: 10px 20px 30px 40px;">半径为10px 20px 30px 40px 的圆角边框</div><br/>
<div style="border: 3px solid black;
border-top-left-radius: 30px;
border-top-right-radius: 20px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 40px;">
分开4个角指定半径</div>

</body>
</html>

CSS3 提供的图片边框

CSS3为图片边框提供了如下属性。

border-image:该属性的值比较复杂,应该遵守如下格式:

1
<border-image-source> <border-image-slice>[/<border-image-width>]? <border-image-repeat>

上面的语法可以分为4个部分。

  • border-image-source:指定边框图片。该值可以使none(没有边框图片)或者使用url()函数指定图片
  • border-image-slice:该属性可以指定1~4个数值或者百分比数值,这四个数值用于控制如何对图片进行切割。假设指定了10 20 30 40,这四个数值分别指定切割边框图片时上边框为10像素,有边框为20像素,下边框为30像素,左边框为40像素。
  • border-image-width:该属性用于指定图片边框的宽度。该属性可指定1~4个长度值、数值、百分比数值或auto。如果指定1个值,则四个边框的宽度都等于该值;如果指定了2个值,那么第一个值将作为上下边框的宽度,第二个值作为左右边框的宽度。如果指定了3个值,则第一个值作为上边框的宽度,第二个值作为左右边框的宽度,第三个值作为下边框的宽度。
  • border-image-repeat:该属性用于指定边框图片的覆盖方式,支持stretch(拉伸覆盖)、repeat(平铺覆盖)、round(取整覆盖)三种覆盖方式。

示例代码:

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
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>image-border</title>
<style type="text/css">
div{
width: 400px;
height: 45px;
}
</style>

</head>
<body>
border-image:url(border.jpg) 27
<div style="-o-border-image:url(border.jpg) 27;
-moz-border-image:url(border.jpg) 27;
-webkit-border-image:url(border.jpg) 27;
">
默认边框宽度</div>

border-image:url(border.jpg) 27/27px
<div style="-o-border-image:url(border.jpg) 27/27px;
-moz-border-image:url(border.jpg) 27/27px;
-webkit-border-image:url(border.jpg) 27/27px;
">
指定边框宽度27px,默认拉伸边框图片</div>

border-image:url(border.jpg) 27/27px repeat
<div style="-o-border-image:url(border.jpg) 27/27px repeat;
-moz-border-image:url(border.jpg) 27/27px repeat;
-webkit-border-image:url(border.jpg) 27/27px repeat;
">
指定边框宽度27px,平铺图片</div>

border-image:url(border.jpg) 27/27px round
<div style="-o-border-image:url(border.jpg) 27/27px round;
-moz-border-image:url(border.jpg) 27/27px round;
-webkit-border-image:url(border.jpg) 27/27px round;
">
指定边框宽度27px,以round方式平铺图片</div>

border-image:url(border.jpg) 27/27px stretch round
<div style="-o-border-image:url(border.jpg) 27/27px stretch round;
-moz-border-image:url(border.jpg) 27/27px stretch round;
-webkit-border-image:url(border.jpg) 27/27px stretch round;
">
指定边框宽度27px,横向stretch,纵向round方式平铺图片</div>

</body>
</html>

补丁相关属性

  • margin:该属性可以同时设置上下左右4个边的外补丁的距离。该属性允许设置4个长度,分别对应4个长度,分别对应于上下左右4个边的补丁距离;如果只设置了1个长度,则该值将作为上下左右的4个边的外补丁距离;如果设置了2个长度,则前一个长度将作为上下的外补丁,后一个长度将作为左右的外补丁距离;如果设置了3个长度的,则第一个长度将作为上边的外补丁距离,第二个长度将作为左右的补丁距离,第三个长度将作为下边的外补丁的距离。
  • margin-top:设置上边的外补丁距离。
  • margin-right:设置右边的外补丁距离
  • margin-bottom:设置下边的外补丁距离
  • margin-left:设置左边的外补丁距离

示例代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>text</title>
<style type="text/css">
div{
width: 300px;
height: 45px;
border: 1px solid black;
}
</style>

</head>
<body>
margin:30px 50px;
<div style="margin: 30px 50px">测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字
</div>
margin: 10px 30px 2px 60px
<div style="margin: 10px 40px 10px 90px">测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字 测试文字</div>
</body>
</html>