26.5　设置滚动条3D界面暗边颜色和暗边框颜色

除了上面介绍的亮边外，还可以设置滚动条的暗边颜色，与之相区别的是，暗边框颜色与暗边颜色不同，下面来介绍。

本小节来介绍设置滚动条3D界面暗边颜色和暗边框颜色，滚动条3D界面暗边颜色与暗边框颜色表示方法不同，滚动条3D界面暗边颜色语法表示如下。

scrollbar-shadow-color：color

表示滚动条3D界面暗边颜色，接的值为颜色值，与之一样的是滚动条3D界面暗边框颜色，表示暗边框的颜色，语法形式如下表示。

scrollbar-darkshadow-color：color

该属性表示暗边框颜色，其两者对比，区别不是很大。

在代码26.4中，设置滚动条3D界面暗边颜色和暗边框颜色3D界面暗边颜色与3D界面暗边框颜色的用法。

代码26.4　源代码\第26章\设置滚动条3D界面暗边颜色和暗边框颜色.html

—————————文件名：设置滚动条3D界面暗边颜色和暗边框颜色.html—————————

01 ＜html＞

02 ＜head＞

03 ＜title＞设置滚动条3D界面暗边颜色和暗边框颜色＜/title＞

04 ＜style type="text/css"＞

05 div

06 {

07 border：1px solid blue；

08 }

09 #s1

10 {

11 width：200px；

12 height：100px；

13 overflow：scroll；

14 /设置暗边颜色/

15 scrollbar-shadow-color：red；

16 }

17 #s2

18 {

19 width：200px；

20 height：100px；

21 overflow：scroll；

22 /设置暗边框颜色/

23 scrollbar-darkshadow-color：red；

24 }

25 ＜/style＞

26 ＜/head＞

27

28 ＜body＞

29 下面是3D界面暗边框颜色：

30 ＜div id="s1"＞

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

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

33 ＜/div＞＜br＞

34 下面是暗边框颜色

35 ＜div id="s2"＞

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

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

38 ＜/div＞

39 ＜/body＞

40 ＜/html＞

【代码解析】第15、23行分别表示了滚动条3D界面暗边颜色和暗边框颜色，在第1层中用scrollbar-shadow-color表示滚动条3D界面暗边颜色，而第2层表示的是scrollbar-darkshadow-color属性，其他表示为暗边框颜色，效果如图26.4所示。

图　26.4　设置滚动条3D界面暗边颜色和暗边框颜色