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

2014年辛星HTML和CSS课程夏天版种类：电子资料大小：3.9M语言：中文 评分：10.0标签：立即下载背景色、背景图 背景格式：

内容

例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： Palign=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 透明。

更多的边框属性

边框实例：所有边框属性在一个声明之中

本例演示用简写属性来将所有四个边框属性设置于同一声明中。

设置四边框样式 本例演示怎么样设置四边框样式。

设置每一边的不同边框 本例演示怎么样在元素的各边设置不一样的边框。

所有边框宽度属性在一个声明之中 本例演示用简写属性来将所有边框宽度属性设置于同一声明中。

设置四个边框的颜色 本例演示怎么样设置四个边框的颜色。可以设置一到四个颜色。

所有下边框属性在一个声明中 本例演示用简写属性来将所有下边框属性设置在同一声明中。

设置下边框的颜色 本例演示怎么样设置下边框的颜色。 设置下边框的样式 本例演示怎么样设置下边框的样式。

设置下边框的宽度 本例演示怎么样设置下边框的宽度。

所有左侧框属性在一个声明之中 所有左侧框属性在一个声明之中。

设置左侧框的颜色 本例演示怎么样设置左侧框的颜色。

设置左侧框的样式 本例演示怎么样设置左侧框的样式。 设置左侧框的宽度 本例演示怎么样设置左侧框的宽度。

所有右侧框属性在一个声明之中 本例演示一个简写属性，用于把所有右侧框属性设置在一条声明中。

设置右侧框的颜色 本例演示怎么样设置右侧框的颜色。 设置右侧框的样式 本例演示怎么样设置右侧框的样式。 设置右侧框的宽度 本例演示怎么样设置右侧框的宽度。

所有上边框属性在一个声明之中 本例演示用简写属性来将所有上边框属性设置于同一声明之中。

设置上边框的颜色 本例演示怎么样设置上边框的颜色。 设置上边框的样式 本例演示怎么样设置上边框的样式。 设置上边框的宽度 本例演示怎么样设置上边框的宽度。

TAG标签：CSS(1)背景(1)边距(1)

转载请说明来源于小浣熊下载站（http://www.tpwno.com）

本文地址：http://www.tpwno.com/news/1900.html

郑重声明：文章来源于网络作为参考，本站仅用于分享不存储任何下载资源,如果网站中图片和文字侵犯了您的版权，请联系我们处理！邮箱3450399331@qq.com