第15章css控制边框和边界的显示效果

1、第15章CSS控制边框和边界的显示效果边框一般用来分隔页面各个部分，常常用于设置表格效果，也可以应用于其他带有边框的元素，例如层元素。边框属性可以分为边框线条样式、边框宽度、边框颜色和边框综合属性等。CSS 可以分别定义每一侧边框样式，包括颜色、宽度、线形等。边界用来分隔元素和相邻的元素，CSS 中可以设置单侧边界属性和综合属性。元素的补白用来分隔元素的内容和边框，补白属性也包括单侧和综合属性，下面分别进行讲解。15.1边框的线条样式边框的线条样式指边框的线条属性，可以采用实线效果、虚线效果、点虚线等其他的边框效果。可以对不同的边框分别设置不同的边框线条样式。15.1.1上边框线条样式bord

2、er-top-styleborder-top-style 用来设置上边框的边框线条样式。【说明】border-top-style:线条的样式说明：线条的样式可设置多种线条效果，例如实线、双实线、点线等，具体的取值及效果如表 15-1 所示。表 15-1 边框的线条效果【上机实战】CSS控制边框样式.bd1 border-top-style:dashed.bd2 border-top-style:double设置边框样式风格属性值具体的含义线条的效果none无边框solid实线dotted点线dashed短线double双实线groove带效果的沟槽ridge突出的脊形效果inset内嵌一个的边

3、框outset外嵌一个的边框【运行效果】上述代码设置了两种边框效果。层本身没有边框，代码中为上边框设置了线条样式，层中文字只有上边框；而表格的上边框也被设置了特殊的风格，运行效果如图 15-1 所示。图 15-1 CSS 控制上边框线条样式15.1.2下边框线条样式border-bottom-styleborder-bottom-style 用来设置下边框线条的样式，下边框的线条样式与设置上边框的线条类似。【说明】border-bottom-style:线条的样式说明:同样可以设置多种线条效果，例如实线、点线、短线等，具体的取值及效果参见表 15-1。【上机实战】CSS控制边框样式.bd1 b

4、order-bottom-style:dotted.bd2 border-bottom-style:groove设置边框样式语文数学89968890【运行效果】在上述代码中，层文字的下边框采用了短线的效果；表格的下边框采用了带效果，如图 15-2 所示。的水槽图 15-2 CSS 设置下边框线条样式15.1.3左边框线条样式border-left-style左边框的线条样式设置与上边框线条样式设置类似。【说明】border-left-style:线条的样式说明：同样可以设置多种线条效果，例如实线、点线、短线等，具体的取值及效果参见表 15-1。【上机实战】CSS控制边框样式.bd1 borde

5、r-left-style:solid.bd2 border-left-style:inset语文数学89968890【运行效果】在上述代码中，层文字的左侧边框采用了实线效果；表格的左边框采用了内嵌的效果，如图 15-3 所示边框图 15-3 CSS 设置左边框线条样式15.1.4右边框线条样式border-right-style右边框的线条样式与上边框的设置类似。【说明】border-right-style:线条的样式说明：同样可以设置多种线条效果，例如实线、点线、短线等，具体的取值及效果参见表 15-1。【上机实战】CSS控制边框样式.bd1border-left-style:solid;设

6、置边框样式语文数学89968890【运行效果】在上述代码中，层文字的右侧边框采用了点线的效果；表格的右边框采用了带外嵌样式的效果，如图 15-4 所示。图 15-4 CSS 设置右边框线条样式15.1.5设置边框的线条样式border-style前面介绍了单独设置每个边框的方法，使用 CSS 可以同时设置一个元素的 4 个边框，使用 border-style 属性可以很容易地实现。【说明】border-right-style:dashed.bd2border-left-style:inset; border-right-style:outset设置边框样式语文数学89968890border-

7、style:各个边框的样条属性值说明：可以直接设置 4 个边框的线条样式，对应的参数顺序依次是上边框、右边框、下边框和左边框；如果只设置了 1 个边框样式，则会对 4 个边框同时起作用；如果设置了两个，则第 1 个值应用于上、下边框，第 2 个值应用于左、右边框；如果提供 3 个，第 1 个用于上边框，第 2 个用于左、右边框，第 3 个用于下边框。【上机实战】【运行效果】在上述代码中，分别定义了 2 个边框线条样式，每个样式设置的边框属性不同，应用的对象也不同，运行效果如图 15-5 所示。图 15-5 CSS 控制边框的线条样式CSS控制边框样式.bd1 border-style:dash

8、ed.bd2 border-style:ridge设置边框样式语文数学89968890边框的颜色CSS 不仅提供了设置边框线条样式的属性，还可以设置边框的颜色，可以可以分别为各个方向的边框设置不同的颜色。设置，也15.2.1上边框的颜色border-top-color上边框的颜色设置属性是 border-top-color。【说明】border-top-color:颜色代码/颜色名称说明：颜色代码是【上机实战】进制的颜色，颜色名称是颜色的相应英文名。【运行效果】在上述代码中，层文字和表格的上边框都分别设置了颜色，运行效果如图 15-6 所示。CSS控制边框样式.bd1border-style:

9、dashed; border-top-color:#0033CC.bd2border-style:ridge; border-top-color:#CC0033设置边框样式语文数学89968890图 15-6 CSS 控制上边框的颜色15.2.2下边框的颜色border-bottom- color下边框的颜色设置属性是 border-bottom-color。【说明】border-bottom-color:颜色代码/颜色名称说明：颜色代码是【上机实战】进制的颜色值，颜色名称是颜色的相应英文名。CSS控制边框样式设置边框样式语文数学注意：如果层文字没有设置边框样式，或者边框样式设置为none，则

10、不会显示出边框，设置的颜色也无法显示出来。【运行效果】在上述代码中，层文字和表格的下边框分别设置了不同的颜色，运行效果如图 15-7 所示。图 15-7 CSS 控制下边框的颜色15.2.3左边框的颜色border-left- color左边框的颜色设置属性是 border-left-color。【说明】border-left-color:颜色代码/颜色名称说明：颜色代码是【上机实战】进制的颜色值，颜色名称是颜色的相应英文名。设置元素左边框的颜色89968890【运行效果】在上述代码中，层文字和表格的左边框分别设置了不同的颜色，运行效果如图 15-8 所示。图 15-8 CSS 控制左边框的颜

11、色15.2.4右边框的颜色border-right- color右边框的颜色设置属性是 border-right-color。【说明】border-right-color:颜色代码/颜色名称说明：颜色代码是【上机实战】花卉市场这里有各种鲜花，价格低廉，质量上乘。您可以自己选购各个品种的鲜花，也可以选择为您组合的花束。下面是的几种畅销花束的价格。名称价格（元/束）花束的材料花语情深意浓36633支粉玫瑰，满天星配大片绿叶，土黄色布纹纸,丝带打结，单面花束我把爱深藏，在这刻，让两颗心在此刻燃亮，从你眼中感受，原来面庞在发烫。蒸蒸日上 688红掌，花，跳舞兰，鸟，香水百合，散尾葵等祝财源茂盛、生意兴

12、隆、大吉大利【运行效果】在上述代码中，层落文字和表格的右边框分别设置了不同的颜色，运行效果如图 15-9 所示。图 15-9 CSS 控制右边框的颜色CSS控制边框样式.bd1border-style:dashed; border-left-color:#0033CC;border-bottom-color:#009900; border-right-color:#003366.bd2border-style:ridge;border-left-color:#CC0033; border-bottom-color:#FFCC00; border-right-color:#CC3333设置边框样

13、式语文数学8996889015.2.5边框颜色border-color前面介绍了分别设置 4 个边框颜色的方法，如果要同时设置一个元素 4 个边框的颜色，可以使用 border-style 属性。【说明】border-color:各个边框的颜色值说明：直接设置 4 个边框的颜色，对应的边框顺序依次是上边框、右边框、下边框和左边框；如果这里只设置了 1 个边框颜色，则会对其他 3 个边框同时起作用；如果设置了两个，则第 1 个值应用于上、下边框，第 2 个值应用于左、右边框；如果提供 3 个，第 1 个用于上边框，第 2 个用于左、右边框，第 3 个用于下边框。【上机实战】【运行效果】在上述代码

14、中，分别定义了两个方式的边框风格，每个样式设置的边框属性值个数不同，CSS控制边框样式.bd1border-style:dashed; border-color:#0033CC.bd2border-style:ridge; border-color:#CC0000设置边框样式语文数学89968890应用的对象也不同。其中，对层文字和表格分别设置了一个边框颜色对 4 个边框同时有效；运行效果如图 15-10 所示。图 15-10 CSS 控制边框的颜色边框的宽度前面的实例使用 CSS 分别设置了边框线条样式和边框颜色，对于边框宽度没有设置，对于这种情况，系统会提供默认边框宽度，默认情况下不同元素

15、的边框宽度是不相同的。使用 CSS 可以分别调整各个边框的宽度。15.3.1上边框的宽度border-top-width在 CSS 中设置上边框宽度的属性是 border-top-width。【说明】border-top-width:宽度值/表示宽度的词说明：设置固定的宽度值，需要给出宽度的数值和宽度的medium、thick，分别表示细边框、正常宽度边框和宽边框。【上机实战】；另外还可以设置为 thin、CSS控制边框样式.bd1border-style:dashed; border-color:#0033CC; border-top-width:thick.bd2border-style:

16、ridge; border-color:#CC0000; border-top-width:1px设置边框样式【运行效果】在这里，层文字被设置为粗边框效果；表格的边框则设置为固定的 1 像素宽度，运行效果如图 15-11 所示。图 15-11 CSS 控制上边框的宽度15.3.2下边框的宽度border-bottom-width在 CSS 中设置下边框宽度的属性是 border-bottom-width。【说明】border-bottom-width:宽度值/表示宽度的词说明：设置固定的宽度值，需要给出宽度的数值和宽度的medium、thick，分别表示细边框、正常宽度边框和宽边框。【上机实战

17、】；另外还可以设置为 thin、CSS控制边框样式.bd1border-style:dashed; border-color:#0033CC;语文数学89968890【运行效果】在这里，层文字的下边框被设置为固定的 2 像素；表格的边框则设置为细边框，运行效果如图 15-12 所示。图 15-12 CSS 控制上边框的宽度15.3.3左边框的宽度border-left-width在 CSS 中设置左边框宽度的属性是 border-left-width。【说明】border-top-width:thick; border-bottom-width:2px.bd2border-style:ridg

18、e; border-color:#CC0000; border-top-width:1px; border-bottom-width:thin设置边框样式语文数学89968890border-left-width:宽度值/表示宽度的词说明：设置固定的宽度值，需要给出宽度的数值和宽度的medium、thick，分别表示细边框、正常宽度边框和宽边框。【上机实战】；另外还可以设置为 thin、【运行效果】在这里，层文字的左边框被设置为正常边框效果；表格的左边框则设置为固定的 1 像素宽度，运行效果如图 15-13 所示。CSS控制边框样式.bd1border-style:dashed; border

19、-color:#0033CC; border-top-width:thick; border-bottom-width:2px; border-left-width:medium.bd2border-style:ridge; border-color:#CC0000; border-top-width:1px; border-bottom-width:thin; border-left-width:1px设置边框样式语文数学89968890图 15-13 CSS 控制下边框的宽度15.3.4右边框的宽度border-right-width在 CSS 中设置右边框宽度的属性是 borer-rig

20、ht-width。【说明】border-right-width:宽度值/表示宽度的词说明：设置固定的宽度值，需要给出宽度的数值和宽度的medium、thick，分别表示细边框、正常宽度边框和宽边框。【上机实战】；另外还可以设置为 thin、CSS控制边框样式.bd1border-style:dashed; border-color:#0033CC; border-top-width:thick; border-bottom-width:2px; border-left-width:medium; border-right-width:3px.bd2border-style:ridge; bor

21、der-color:#CC0000; border-top-width:1px; border-bottom-width:thin; border-left-width:1px; border-right-width:thick设置边框样式语文数学【运行效果】在这里，层文字右边框被设置为粗边框效果；表格的右边框则设置为固定的 3 像素宽度，运行效果如图 15-14 所示。图 15-14 CSS 控制右边框的宽度15.3.5边框宽度border-width如果要同时设置一个元素 4 个边框的宽度，除了可以分别设置 4 个边框宽度属性外，还可以更加快捷地利用 border-style 属性来实现。

22、【说明】border-width:各边框宽度值说明：可以直接设置 4 个边框的宽度，对应的边框顺序依次是上边框、右边框、下边框和左边框；如果这里只设置了 1 个边框宽度，则会对 4 个边框同时起作用；如果设置了 2个，则第 1 个值应用于上、下边框，第 2 个值应用于左、右边框；如果提供 3 个，第 1 个用于上边框，第 2 个用于左、右边框，第 3 个用于下边框。【上机实战】CSS控制边框样式.bd1border-style:dashed; border-color:#0033CC; border-width:thin.bd2border-style:ridge; border-color:

23、#CC0000; border-width:2px89968890【运行效果】在上述代码中，分别定义了两个边框样式，每个样式设置的边框属性值个数不同，应用的对象也不同。运行后的效果如图 15-15 所示。图 15-15 CSS 控制边框的宽度单独设置各个边框的样式前面介绍了分别设置各个边框的样式，包括边框宽度、边框颜色和边框线条样式，本节介绍单独综合设置一个边框的线条、颜色和宽度的方法。15.4.1上边框border-top设置上边框的各种边框属性，包括线条样式、颜色、边框等，可以使用 border-top 属性来实现。【说明】设置边框样式语文数学89968890border-top:边框的各

24、属性值说明：如果边框的 3 个属性都要进行设置，按照宽度、线条样式、颜色的顺序进行。【上机实战】【运行效果】上述代码中，层文字的上边框被蓝色的粗短线效果；表格的上边框被设置为正常宽度粉红色双实线效果。运行上述代码，效果如图 15-16 所示。图 15-16 CSS 控制上边框的效果CSS控制边框样式.bd1 border-top:thick dashed #0000FF.bd2 border-top:medium double #FF3300设置边框样式语文数学8996889015.4.2左边框border-left设置左边框的各种边框属性可以使用 border-left 属性来实现。【说明】

25、border-left:边框的各属性值【上机实战】【运行效果】在这里，层文字的左边框被设置为浅蓝色的 2 像素点线效果；表格的左边框被设置为粗边框宽度的绿色内嵌效果。代码运行的效果如图 15-17 所示。CSS控制边框样式.bd1border-top:thick dashed #0000FF; border-left:2px dotted #003399.bd2border-top:medium double #FF3300; border-left:thick inset #CCFF33设置边框样式语文数学89968890图 15-17 CSS 控制左边框的效果15.4.3下边框border

26、-bottom设置下边框的各种边框属性可以使用 border-bottom 属性来实现。【说明】border-bottom:边框的各属性值【上机实战】CSS控制边框样式.bd1border-top:thick dashed #0000FF; border-left:2px dotted #003399; border-bottom:4px groove #00FF00 .bd2border-top:medium double #FF3300; border-left:thick inset #CCFF33; border-bottom:thin hidden #CC6699设置边框样式语文数学

27、89968890【运行效果】在这里，层文字的下边框被设置为 4 像素绿色深水槽效果；表格的下边框被设置隐藏的细线效果。代码运行的效果如图 15-18 所示。图 15-18 CSS 控制左边框的样式15.4.4右边框border-rightborder-right 属性设置右边框的各种边框属性，包括线条样式、颜色、边框等。【说明】border-right:边框的各属性值【上机实战】CSS控制边框样式.bd1border-top:thick dashed #0000FF; border-left:2px dotted #003399; border-bottom:4px groove #00FF0

28、0; border-right:thick outset #0000CC .bd2border-top:medium double #FF3300; border-left:thick inset #CCFF33; border-bottom:thin hidden #CC6699; border-right:medium dashed #FFCC33设置边框样式语文数学【运行效果】在这里，层文字的右边框被设置为粗外嵌棕色效果；表格的右边框被设置为正常宽度的橙色点线效果。代码运行效果如图 15-19 所示。图 15-19 CSS 控制右边框的样式设置边框整体效果border 属性一般用于设置的

29、边框风格，使用该属性设置边框后，元素的 4 个边框都采用该效果。即使设置了多个宽度值，也只取最后一个值。如果要单独设置元素的 4 个边框效果不同，需要分别进行设置。【说明】border:边框宽度 边框风格 边框颜色说明：可以只设置其中的一项或几项，但如果要正常显示设置的边框效果，需要设置边框的线条样式，即使是采用默认的 solid。【上机实战】CSS控制边框样式.bd1border:thin dotted #0033FF.bd2border:2px inset #FF330089968890【运行效果】这段代码将层的边框设置为细的蓝色点线；将表格的边框设置为 2 像素宽的红色内嵌样式线。效果如

30、图 15-20 所示。图 15-20 CSS 控制边框的效果边界属性边距一般是设置元素周围的边界宽度，是元素与周边环境产生的一定空间；在 CSS 中可以分别为一个元素设置各个方向的边界宽度。15.6.1上边界属性margopmargop 属性用来定义上部边界的显示效果。【说明】margop:length|percent|auto说明：距离值可以是百分比，也可以是由数值和组成的确定的距离，或者是系统自设置边框样式语文数学89968890动设定。【上机实战】【运行效果】在上述代码中，层的上边距设置为 20 像素，表格的上边距设置为 10%。运行这段代码的效果如图 15-21 所示。CSS控制边界样

31、式.bd1border:thin dotted #0033FF; margop:20px.bd2border:2px inset #FF3300; margop:10%设置边界属性语文数学89968890图 15-21 CSS 控制上边界15.6.2右边界属性margin-right右边界属性是 margin-right，用来控制元素距离右边元素的距离。【说明】margin-right: length|percent|auto说明：距离值可以是由数值和动设定。【上机实战】组成的确定的距离，也可以是百分比，或者是系统自CSS控制边界样式.bd1border:thin dotted #0033FF

32、; margop:20px;margin-right:100px.bd2border:2px inset #FF3300; margop:10%;margin-right:10%设置边界属性语文数学【运行效果】在上述代码中，为图像设置了 100 像素的右侧边距，为第二段文字设置了 10%像素的右侧边距，运行效果如图 15-22 所示。图 15-22 CSS 控制右边界15.6.3下边界属性margin-bottom下边界与上边界相对应，指元素距离下方的边距值。【说明】margin-bottom: length|percent|auto说明：距离值可以是由数值和动设定。【上机实战】组成的确定的距

33、离，也可以是百分比，或者是系统自CSS控制边界样式 divborder:thin solid #66FFCC.bd1border:thin dotted #0033FF; margin-bottom:20px.bd2border:2px inset #FF3300; margin-bottom:10%89968890【运行效果】运行上述代码，可以看到两幅图像下边框的距离是不相同的，第一幅设置设置了下边距为 20 像素，第二幅图像设置了下边距为 10%，运行效果如图 15-23 所示。图 15-23 CSS 控制下边界15.6.4左边界属性margin-left左边界属性是元素距离左侧其他元素的

34、距离。【说明】margin-left: length|percent|auto说明：距离值可以是由数值和动设定。【上机实战】组成的确定的距离，也可以是百分比，或者是系统自CSS控制边界样式 divborder:thin solid #66FFCC.bd1border:thin dotted #0033FF; margin-left:30px.bd2border:2px inset #FF3300; margin-left:20%设置边界属性设置边界属性【运行效果】在上述代码中，第一幅图像的左侧边距设置为 30 像素；第二幅图像文字的左侧边距设置为 20%，运行效果如图 15-24 所示。图 1

35、5-24 CSS 控制左边界15.6.5边界综合属性margin边界综合属性可以定义边界的显示效果。前边介绍的四种边界设置方式都是分别设置元素的边界，如果要同时设置某个元素的 4 个边距，可以使用复合属性 margin 来实现。【说明】margin:各个边距的值说明：可以设置 14 个边距值，设置为 1 个值，则同时作用于元素的 4 个方向；如果设置两个值，则分别作用于上下和左右边距；如果设置 3 个值，则分别作用于上边距、左右边距和下边距；设置 4 个值则按照上、右、下、左的顺序起作用。【上机实战】CSS控制边界样式 Divborder:thin solid #66FFCC.bd1borde

36、r:thin dotted #0033FF; margin:20px.bd2border:2px inset #FF3300; margin:50px 50px【运行效果】在上述代码中，为第一幅图像设置了一个边距值，作用于图像的四个边界；为第二幅图像设置了 2 个边距，分别作用在上下边距和左右边距。运行上述代码的效果如图 15-25 所示。图 15-25 CSS 控制边界元素的补白在 CSS 中，补白属性包括 4 个单侧补白属性和一个综合补白属性，包括顶部补白（ padding-top ）、左 侧补白（ padding-left ）、右 侧补白（ padding-right ）、底 部补白 （

37、padding-bottom）和综合补白属性（padding）。15.7.1顶部补白padding-top顶端补白定义元素的内容与其上边框之间的距离，一般常用来设置页面补白。【说明】padding-top:length|percent|auto说明：距离值可以是由数值和动设定。【上机实战】组成的确定的距离，也可以是百分比，或者是系统自CSS控制元素补白 divpadding-top:30px; background:#99FFCC; height:200px; width:400px设置边界属性【运行效果】在上述代码中，将页面的顶端补白设置为 30 像素，其运行效果如图 15-26 所示。图 15-26 CSS 控制页面的顶端补白15.7.2左侧补白padding-left左侧补白（padding-left）用来定义元素与与其左侧边界之间的间隔。【说明】padding-left: length|percent|auto说明：距离值可以是由数值和动设定。【上机实战】组成的确定的距离，也可以是百分比，或者是系统自CSS控制元素补白 divpadding-top:30px; padding-left:50px; background:#99FFCC; height:200px; width:400px世界不会在意你的自尊，人们看的只是你的成