从零开始学CSS3 | Stack Overflow

从零开始学CSS3

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个值，分别对应在纵向和横向同时平铺、不平铺、仅在横向平铺、仅在纵向平铺。

示例：

<!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,那么背景图片就会被固定在该组件中。不会随着滚动条的滚动而滚动。
示例：

    <!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）

示例代码：

<!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属性可控制背景图片的大小。

<!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允许指定多个属性值（多个属性值之间以英文逗号隔开），这样即可实现多背景图片的效果。

<!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凸出边框

示例代码：

<!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-前缀

<!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:该属性用于指定左下角的圆角半径

示例代码：

<!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(取整覆盖)三种覆盖方式。

示例代码：

<!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:设置左边的外补丁距离

示例代码：

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