CSS中的背景、边距与边框样式属性设置范例

 背景色、背景图 背景格式：

内容

例1：

文字的背景颜色

其中，WIDTH: 300px是背景宽度，#99ff00是背景色。效果：文字的背景颜色
例2：

背景图背景色

其中，#99FF00 、no-repeat，分别是背景属性的颜色值、不重复值。背景大小为300×150。
效果：背景图背景色
背景属性：背景颜色 background-color:颜色值
背景图片 background-image:url(图片地址) 图片重复
background-repeat:重复值 ： repeat-x 横向重复 repeat-y 竖向重复
no-repeat 不重复图片滚动
background-attachment:滚动值： scroll滚动 fixed固定不动背景位置
background-position:位置值： 离网页最左面、上面的距离，单位：px。
更多的背景属性 在上例中，我们还可以添加更多的背景属性值。
例3：

上面的代码表示，网页的背景颜色是翠绿色，背景图片是background.gif图片，背景图片横向重复，背景图片距离网页最左面0px，距离网页最上面20px，背景大小为500×160。
效果： 背景实例：设置背景颜色 期而至本例演示如何为元素设置背景颜色。 设
置文本的背景颜色 本例颜色如何设置部分文本的背景颜色。
将图像设置为背景 本例演示如何将图像设置为背景。
将图像设置为背景 2 本例演示如何为多个元素同时设置背景图像。
如何重复背景图像 本例演示如何重复背景图像。
如何在垂直方向重复背景图像 本例演示如何垂直地重复背景图像。
如何在水平方向重复背景图像 本例演示如何水平地重复背景图像。
如何仅显示一次背景图像 本例演示如何仅显示一次背景图像。
如何放置背景图像 本例演示如何在页面上放置背景图像。
如何使用%来定位背景图像 本例演示如何使用百分比来在页面上定位背景图像。
如何使用像素来定位背景图像 本例演示如何使用像素来在页面上定位背景图像。
如何设置固定的背景图像 本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。
所有背景属性在一个声明之中 本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。
边距与边框 基本知识：
框模结构，由内容 内边距(呈现内容背景) 边框 外边距(默认透明 )构成；width 、height指内容的宽、高。

在左右或上下边距、边框相等情况下，框模总长=内容＋(内边距＋边框＋外边距)×2。边距格式：

内容

例4：

文字

效果：
这个段落带有指定的外边距，上外边距0.5cm ，右外边距3cm，下外边距1cm，左外边距3cm。外边距为透明。
这个段落带有指定的内边距，内边距四边均为0.5cm。这段文字的背景色是翠绿色，背景色包含内边距。

例5： <P style="BORDER: #ff00ff 2px double;BACKGROUND:#99ff00; PADDING-BOTTOM:10px; MARGIN-left:4cm;MARGIN-right:4cm;PADDING-TOP:10px"align=center>
图片与文字效果：左右外边距均为4cm，上下内边距均为10px，边框2px，内容居中。

例6：

这个表格TABLE有左右外边距均为5cm，这个表格TD有上下左右内边距均为1cm。

效果：这个表格TABLE有左右外边距均为5cm，这个表格TD有上下左右内边距均为1cm。
边距属性：内边距：padding 简写 padding-top 上 right 右 bottom 下 left 左 （ length % ）
外边距：margin 简写 margin-top 上 right 右 bottom 下 left 左 （auto length % ）属性值：auto 设置边距 length 固定边距，
默认值是0 % 基于父对象的百分比边距更多的边距属性：内边距 外边距 边距实例：所有内边距属性在一个声明中

本例演示使用简写属性将所有的内边距属性设置于一个声明中，可以有一到四个值。
设置下内边距 1 本例演示如何使用厘米值来设置单元格的下内边距。
设置下内边距 2 本例演示如何使用百分比值来设置单元格的下内边距。
设置左内边距 1 本例演示如何使用厘米值来设置单元格的左内边距。
设置左内边距 2 本例演示如何使用百分比值来设置单元格的左内边距。
设置右内边距 1 本例演示如何使用厘米值来设置单元格的右内边距。
设置右内边距 2 本例演示如何使用百分比值来设置单元格的右内边距。
设置上内边距 1 本例演示如何使用厘米值来设置单元格的上内边距。
设置上内边距 2 本例演示如何使用百分比值来设置单元格的上内边距。
设置文本的左外边距 本例演示如何设置文本的左外边距。
设置文本的右外边距 本例演示如何设置文本的右外边距。
设置文本的上外边距 本例演示如何设置文本的上外边距。
设置文本的下外边距 本例演示如何设置文本的下外边距。
所有的外边距属性在一个声明中。 本例演示如何将所有的外边距属性设置于一个声明中。

边框格式：

内容

例7：

有上下边位、边宽、样式、颜色的边框

效果：有上下边位、边宽、样式、颜色的边框 例8：

点状边框，在大多数浏览器中呈现为实线。

虚线边框，在大多数浏览器中呈现为虚线。

实线边框，在浏览器中呈现为实线。

双线边框，宽度等于 border-width 的值。

3D 凹槽边框，其效果取决于 border-color 的值。

3D 垄状边框，其效果取决于 border-color 的值。

3D inset 边框，其效果取决于 border-color 的值。

3D outset 边框，其效果取决于 border-color 的值。

效果：
dotted 点状边框，在大多数浏览器中呈现为实线。
dashed 虚线边框，在大多数浏览器中呈现为虚线。
solid 实线边框，在浏览器中呈现为实线。
double 双线边框，宽度等于 border-width 的值。
groove 3D 凹槽边框，其效果取决于 border-color 的值。
ridge 3D 垄状边框，其效果取决于 border-color 的值。
inset 3D inset 边框，其效果取决于 border-color 的值。
outset 3D outset 边框，其效果取决于 border-color 的值。
例9：

效果： 边框属性：边框边位： border 简写 border-top上边 border-bottom 下边 border-left 左边 border-right 右边。
边框宽度： border-width: thin 细 medium 较细 thick较粗 length 或 数量px。
边框样式： border-style: none; (无边框) dotted; (点线) dashed; (虚线) solid; (实线) double; (双线) groove; (凹槽) ridge; (脊状) inset; (边框) outset; (边框)。
边框颜色： border-color: name 颜色名 rgb10进制 hex 16进制；transparent 透明。
更多的边框属性
边框实例：所有边框属性在一个声明之中
本例演示用简写属性来将所有四个边框属性设置于同一声明中。
设置四边框样式 本例演示如何设置四边框样式。
设置每一边的不同边框 本例演示如何在元素的各边设置不同的边框。
所有边框宽度属性在一个声明之中 本例演示用简写属性来将所有边框宽度属性设置于同一声明中。
设置四个边框的颜色 本例演示如何设置四个边框的颜色。可以设置一到四个颜色。
所有下边框属性在一个声明中 本例演示用简写属性来将所有下边框属性设置在同一声明中。
设置下边框的颜色 本例演示如何设置下边框的颜色。 设置下边框的样式 本例演示如何设置下边框的样式。
设置下边框的宽度 本例演示如何设置下边框的宽度。
所有左边框属性在一个声明之中 所有左边框属性在一个声明之中。
设置左边框的颜色 本例演示如何设置左边框的颜色。
设置左边框的样式 本例演示如何设置左边框的样式。 设置左边框的宽度 本例演示如何设置左边框的宽度。
所有右边框属性在一个声明之中 本例演示一个简写属性，用于把所有右边框属性设置在一条声明中。
设置右边框的颜色 本例演示如何设置右边框的颜色。 设置右边框的样式 本例演示如何设置右边框的样式。 设置右边框的宽度 本例演示如何设置右边框的宽度。
所有上边框属性在一个声明之中 本例演示用简写属性来将所有上边框属性设置于同一声明之中。
设置上边框的颜色 本例演示如何设置上边框的颜色。 设置上边框的样式 本例演示如何设置上边框的样式。 设置上边框的宽度 本例演示如何设置上边框的宽度。