22.6.2　设置多层边框

有时单条边框不能表达出边框的效果，换言之，有更好的方法可以在某些应用中比单边框效果会好些。有一种用法，在两个层中，大层背景与小层的背景相区别，然后在大层中加上不同颜色的边框，这样就会出现三种颜色，看起来有立体效果，如百度知道的边框就是利用这种方式布局，只不过百度用到了边框圆角，圆角在以后的实例中也会讲解。下面的代码是如何布局类似的边框，但不会按步骤讲解，请多看代码中的解析。

本小节介绍在布局中实用的多边框用法，在多个边框中，用到不同颜色的边框组成一个对象的边框效果，从外观给人的感觉更有层次感，能表现出有阴影的3D效果，如代码20.11所示。

代码22.11　源代码\第22章\设置多层边框.html

——————————————文件名：设置多层边框.html——————————————

01 ＜html＞

02 ＜head＞

03 ＜title＞多层边框＜/title＞

04 ＜style type="text/css"＞

05 #myborder

06 {

07 /设置宽度/

08 width：300px；

09 /设置背景颜色/

10 background：#bbb；

11 /设置边框，但颜色与背景不同/

12 border：1px solid#aaa；

13 }

14 #mybg

15 {

16 /上、右、下、左的外补丁为3像素/

17 margin：3px；

18 /上、右、下、左的内补丁为2像素/

19 padding：2px；

20 /设置与上面两种都不同的颜色/

21 background：#ccc；

22 }

23 ＜/style＞

24 ＜/head＞

25 ＜div id="myborder"＞

26 ＜div id="mybg"＞

27 这里面是用背景填充，类似于边框＜br/＞

28 效果类似于边框，但这种可以定颜色值＜br＞

29 能体现立体性，加上圆角会更好。

30 ＜/div＞

31 ＜/div＞

32 ＜body＞

33 ＜/body＞

34 ＜/html＞

【代码解析】这样就创建了一个对象层。通过3种不同的颜色来设置边框增强了立体感，不过要注意的是，颜色搭配也是一种艺术。本实例中的多层边框是用两个深点儿的颜色表示边框，然后用另一种浅色表示背景，效果如图22.12所示。

图　22.12　设置多层边框

说明　颜色搭配在网页中很重要，要想好好地学习，并不是看看书就能够提高的，要多看、多练习和多交流。能用好网页中的颜色，会起到事半功倍的效果，多参阅这方面的书籍。