26.3　设置3D界面亮边颜色和表面颜色

滚动条的效果可以用3D效果表现出来，还可以在其中设置不同的颜色，而且还有亮边框和表面等颜色的设置，本小节对这些内容进行介绍。

设置3D界面亮边颜色和表面颜色表示滚动条3D界面的亮边（ThreedHighlight）颜色，其语法形式如下。

scrollbar-highlight-color：color

以上代码表示3D界面的亮边颜色，其后的属性值为颜色值，与亮边属性一样，3D界面表面颜色属性所接的值也是颜色值，其语法如下。

scrollbar-face-color：color

其属性值接颜色值，表示设置3D界面亮边颜色和表面颜色。下面代码26.2表示属性scrollbar-highlight-color的用法。通过设置scrollbar-highlight-color的颜色与scrollbar-face-color的颜色来表示两者的用法。

代码26.2　源代码\第26章\设置3D界面亮边颜色和表面颜色.html

——————————-文件名：设置3D界面亮边颜色和表面颜色.html——————————-

01 ＜html＞

02 ＜head＞

03 ＜title＞设置3D界面亮边颜色和表面颜色＜/title＞

04 ＜style type="text/css"＞

05 div

06 {

07 /设置层边框/

08 border：1px solid blue；

09 }

10 #s1

11 {

12 /设置层高度和宽度还有滚动条/

13 width：200px；

14 height：100px；

15 overflow：scroll；

16 /设置3D亮边颜色/

17 scrollbar-highlight-color：red；

18 }

19 #s2

20 {

21 width：200px；

22 height：100px；

23 overflow：scroll；

24 /设置滚动条表面颜色/

25 scrollbar-face-color：red；

26 }

27 ＜/style＞

28 ＜/head＞

29

30 ＜body＞

31 下面是3D界面亮边颜色：

32 ＜div id="s1"＞

33 HTML+CSS完全自学手册.HTML+CSS完全自学手册.HTML+CSS完全自学手册.

34 HTML+CSS完全自学手册.HTML+CSS完全自学手册.HTML+CSS完全自学手册

35 ＜/div＞＜br＞

36 下面是3D表面颜色

37 ＜div id="s2"＞

38 HTML+CSS完全自学手册.HTML+CSS完全自学手册.HTML+CSS完全自学手册.

39 HTML+CSS完全自学手册.HTML+CSS完全自学手册.HTML+CSS完全自学手册

40 ＜/div＞

41 ＜/body＞

42 ＜/html＞

【代码解析】属性scrollbar-highlight-color表示3D界面亮边颜色，在代码第17行设置的值为红色，而属性scrollbar-face-color表示3D界面表面颜色，在代码第25行设置的值也为红色，但用不同的两个滚动条表示，如图26.2所示。

图　26.2　设置3D界面亮边颜色和表面颜色

注意　以上设置在FF浏览器中不支持。