CSS - 背景、边框

1. CSS背景（background）

单个属性
background-color	背景颜色
background-image	背景图片地址
background-repeat	是否平铺
background-position	背景位置
background-attachment	背景固定还是滚动
背景的合写（符合属性）
background	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

• 背景图片（image）

语法：

background-image： none | url(图片地址)

• 背景平铺（repeat）

语法：

background-repeat：repeat | no-repeat | repeat-x | repeat-y

参数
repeat	背景图像在纵向和横向上平铺（默认）
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

• 背景位置（position）

语法：

background-position：length | position

参数
length	百分数 或 由浮点数和单位标识符组成的长度值
position	top、center、bottom、left、right

说明：

1. 设置或检索对象的背景图像位置，必须先指定background-image属性。默认值为（0% 0%）。
2. 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值用于纵坐标。
3. 该属性定位不受对象的补丁属性（padding）设置影响。

• 背景附着

语法：

background-attachment：scroll | fixed

参数
scroll	背景图像随对象内容波动
fixed	背景图像固定

• 背景简写

书写顺序没有无官方强制标准。

为了可读性，建议如下写：
background：背景颜色 背景图片地址 背景平铺 背景滚动 背景

2. 背景透明（CSS3）

CSS3支持背景半透明的语法格式：

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围0~1。

注意：
背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

3. 盒子边框（border）

语法：

border：border-width || border-style || border-color

• 边框属性-设置边框样式 border-style

语法：

border-style：none | hidden | dotted | dashed | solod | double | groove | ridge | inset | outset

常用属性：

参数
none	没有边框即忽略所有边框的宽度（默认值）
solid	边框为单实线（最常用的）
dashed	边框为虚线
dotted	边框为点线
double	边框为双实线

• 表格边框写法总结

设置内容	样式属性	常用属性值
上边框	border-top-style：样式； border-top-width：宽度； border-top-color： 颜色； border-top：宽度 样式 颜色；
左边框	border-left-style：样式； border-left-width：宽度； border-left-color： 颜色； border-left：宽度 样式 颜色；
下边框	border-bottom-style：样式； border-bottom-width：宽度； border-bottom-color： 颜色； border-bottom：宽度 样式 颜色；
右边框	border-right-style：样式； border-right-width：宽度； border-right-color： 颜色； border-right：宽度 样式 颜色；
样式综合设置	border-style：上 [右 下 左]；	none（默认）、solid、dashed、dotted、double
宽度综合设置	border-width：上 [右 下 左]；	像素值
颜色综合设置	border-color：上 [右 下 左]；	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)

• 表格的细线边框

语法：

table { border-collapse:collapse;}

border-collapse:collapse; 表示边框合并在一起。

• 圆角边框（CSS3）

语法：

border-radius:50%;