网页设计：使用 CSS3 Box Shadow 实现的 10 个创新技术

1. 固定的顶部工具栏

在线演示

代码：

01

#banner {

02	position: fixed;

03	height: 60px;

04	width: 100%;

05

top: 0;

06

left: 0;

07	border-top: 5px solid #a1cb2f;

08	background: #fff;

09	-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);

10	-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);

11	box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);

12	z-index: 999999;

13

}

14

15	#banner h1 {

16	line-height: 60px;

17

}

2. 下列式导航菜单

在线演示

代码：

01	#bar { display: block; height: 45px; background: #22385a; padding-top: 5px; margin-bottom: 150px; position: relative; }

02	#bar ul { margin: 0px15px; font-family: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif; }

03	#bar ul li {  background: #22385a; display: block; font-size: 1.2em; position: relative; float: left; }

04	#bar ul li a {

05	display: block;

06	color: #fffff7;

07	line-height: 45px;

08	font-weight: bold;

09	padding: 0px10px;

10	text-decoration: none;

11	z-index: 9999;

12

}

13

14	#bar ul li a:hover, #bar ul li a.selected {

15	color: #365977;

16	background: #fff;

17	border-top-left-radius: 3px;

18	border-top-right-radius: 3px;

19	-webkit-border-top-left-radius: 3px;

20	-webkit-border-top-right-radius: 3px;

21	-moz-border-radius-topleft: 3px;

22	-moz-border-radius-topright: 3px;

23

}

24

25	#bar ul .subnav {

26	display: block;

27	left: 14px;

28	top: 48px;

29	z-index: -1;

30	width: 500px;

31	position: absolute;

32	height: 90px;

33	border: 1px solid #edf0f3;

34	border-top: 0;

35	padding: 10px 0 10px10px;

36	overflow: hidden;

37	-moz-border-radius-bottomleft: 3px;

38	-moz-border-radius-bottomleft: 3px;

39	-webkit-border-bottom-left-radius: 3px;

40	-webkit-border-bottom-right-radius: 3px;

41	border-bottom-right-radius: 3px;

42	border-bottom-right-radius: 3px;

43	-moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);

44	-webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);

45	box-shadow: 0px 2px 7px rgba(0,0,0,0.25);

46	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333')";

47	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=180, Color='#333333');

48

}

3. 带光泽阴影按钮

在线演示

代码：

01

blues {

02	color: #fff;

03	width: 190px;

04	height: 35px;

05	cursor: pointer;

06	font-family: Arial, Tahoma, sans-serif;

07	font-size: 1.0em;

08	font-weight: bold;

09	-moz-border-radius: 2px;

10	-webkit-border-radius: 2px;

11	border-radius: 2px;

12	border-width: 1px;

13	border-color: #0053a6 #0053a6 #000;

14	background-color: #6891e7;

15	background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);

16	background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);

17	background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);

18	background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));

19	background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);

20	background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);

21	text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);

22	-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);

23	-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);

24	-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);

25	box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);

26	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);

27

}

28

29	.blues:hover {

30	border-color: #002d59 #002d59 #000;

31	-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3pxrgba(0, 0, 0, 0.25);

32	-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3pxrgba(0, 0, 0, 0.25);

33	-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3pxrgba(0, 0, 0, 0.25);

34	box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3pxrgba(0, 0, 0, .25);

35	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf,EndColorStr=#0053a6);

36	background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);

37	background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);

38	background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);

39	background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));

40	background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);

41	background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);

42

}

43

44	.blues:active {

45	border-color: #000 #002d59 #002d59;

46	-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;

47	-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;

48	-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;

49	box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;

50	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);

51	background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);

52	background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);

53	background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);

54	background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));

55	background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);

56	background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);

57

}

4. 弹出通知栏

在线演示

代码：

01

.flyout {

02	width: 310px;

03	margin-top: 10px;

04	font-size: 11px;

05	position: relative;

06	font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;

07	background-color: white;

08	padding: 9px 11px;

09	background: rgba(255, 255, 255, 0.9);

10	border: 1px solid #c5c5c5;

11	-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);

12	-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);

13	box-shadow: 0 3px 8px rgba(0, 0, 0, .25);

14	-webkit-border-radius: 3px;

15	-moz-border-radius: 3px;

16	border-radius: 3px;

17

}

18

19	.flyout #tip {

20	background-image: url('images/tip.png');

21	background-repeat: no-repeat;

22	background-size: auto;

23	height: 11px;

24	position: absolute;

25	top: -11px;

26	left: 25px;

27	width: 20px;

28

}

29

30	.flyout h2 {

31	text-transform: uppercase;

32	color: #666;

33	font-size: 1.2em;

34	padding-bottom: 5px;

35	margin-bottom: 12px;

36	border-bottom: 1px solid #dcdbda;

37

}

38	.flyout p { padding-bottom: 25px; font-size: 1.1em; color: #222; }

5. 苹果页面包装

在线演示

代码：

01	.applewrap {

02	width: 100%;

03	display: block;

04	height: 150px;

05	background: white;

06	border: 1px solid;

07	border-color: #e5e5e5 #dbdbdb #d2d2d2;

08	-webkit-border-radius: 4px;

09	-moz-border-radius: 4px;

10	border-radius: 4px;

11	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;

12	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;

13	box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;

14

}

15

16

17	.applewrap .col {

18	float: left;

19	box-sizing: border-box;

20	width: 250px;

21	height: 150px;

22	padding: 16px 7px 6px 22px;

23	font: 12px/18px"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;

24	color: #343434;

25	border-right: 1px solid #dadada;

26

}

6. 苹果内容框效果

在线演示

代码：

01	.applebox {

02	width: auto;

03	height: 85px;

04	box-sizing: border-box;

05	background: #f5f5f5;

06	padding: 20px 20px 10px;

07	margin: 10px 0 20px;

08	border: 1px solid #ccc;

09	border-radius: 4px;

10	-webkit-border-radius: 4px;

11	-moz-border-radius: 4px;

12	-o-border-radius: 4px;

13	-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);

14	-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);

15	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);

16

}

17

18	.applebox .col {

19	width: 140px;

20	float: left;

21	margin: 0 0 0 30px;

22

}

7. 精选链接

在线演示

代码：

01	.applefeature {

02	height: 150px;

03	margin: 8px;

04	vertical-align: top;

05	display: inline-block;

06

}

07

08	.applefeature a {

09	display: block;

10	width: 168px;

11	height: 140px;

12	border: 1px solid #ccc;

13	color: #333;

14	text-decoration: none;

15	font-weight: bold;

16	line-height: 1.3em;

17	background: #f7f7f7;

18	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);

19	-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);

20	box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);

21	-webkit-border-radius: 4px;

22	-moz-border-radius: 4px;

23	border-radius: 4px;

24

}

25	.applefeature a:hover {

26	background: #fafafa;

27	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f7f7f7));

28	background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7, #fff);

29	-webkit-box-shadow: inset 0 1px 2pxrgba(0,0,0,.3);

30	-moz-box-shadow: inset 0 1px 2pxrgba(0,0,0,.3);

31	box-shadow: inset 0 1px 2px rgba(0,0,0,.3);

32	-webkit-border-radius: 4px;

33	-moz-border-radius: 4px;

34	border-radius: 4px;

35

}

36

37	.applefeature a img {

38	display: block;

39	margin: 26px auto 4px;

40

}

41	.applefeature a h4 {

42	display: block;

43	width: 160px;

44	font-size: 1.3em;

45	font-family: Arial, Tahoma, sans-serif;

46	color: #646464;

47	text-align: center;

48

}

8. 帧内图片

在线演示

代码：

01	.wpframe {

02	background: #fff;

03	border-radius: 2px;

04	-webkit-border-radius: 2px;

05	-moz-border-radius: 2px;

06	padding: 8px;

07	-webkit-box-shadow: 1px 2px 1px #d1d1d1;

08	-moz-box-shadow: 1px 2px 1px #d1d1d1;

09	box-shadow: 1px 2px 1px #d1d1d1;

10

}

9. 具有焦点亮度效果的文本框

在线演示

代码：

01	.formwrap { display: block; margin-bottom: 15px; }

02	.formwrap label {

03	display: inline-block;

04	width: 80px;

05	font-size: 11px;

06	font-weight: bold;

07	color: #444;

08	font-family: Arial, Tahoma, sans-serif;

09

}

10

11	.formwrap .shadowfield {

12	position: relative;

13	width: 250px;

14	font-size: 17px;

15	font-family: "Helvetica Neue", Arial, sans-serif;

16	font-weight: normal;

17	background: #f7f8f8;

18	color: #7c7c7c;

19	line-height: 1.4;

20	padding: 6px 12px;

21	outline: none;

22	transition: all 0.2s ease-in-out 0s;

23	-webkit-transition: all 0.2s ease-in-out 0s;

24	-moz-transition: all 0.2s ease-in-out 0s;

25	border: 1px solid #ad9c9c;

26	border-radius: 6px 6px 6px 6px;

27	box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;

28

}

29	.formwrap .shadowfield:focus {

30	border-color: #930;

31	background: #fff;

32	color: #5d5d5d;

33	box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 00 7px rgba(235, 82, 82, 0.5);

34	-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1pxrgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);

35	-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1pxrgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);

36

}

10. 弹性阴影按钮

在线演示

代码：

01	.blu-btn {

02	display: inline-block;

03	-moz-border-radius: .25em;

04	border-radius: .25em;

05	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);

06	-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);

07	box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);

08	background-color: #276195;

09	background-image: -moz-linear-gradient(#3c88cc,#276195);

10	background-image: -ms-linear-gradient(#3c88cc,#276195);

11	background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0%,#3c88cc),color-stop(100%,#276195));

12	background-image: -webkit-linear-gradient(#3c88cc,#276195);

13	background-image: -o-linear-gradient(#3c88cc,#276195);

14	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0);

15	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)";

16	background-image: linear-gradient(#3c88cc,#276195);

17	border: 0;

18	cursor: pointer;

19	color: #fff;

20	text-decoration: none;

21	text-align: center;

22	font-size: 16px;

23	padding: 0px 20px;

24	height: 40px;

25	line-height: 40px;

26	min-width: 100px;

27	text-shadow: 0 1px 0 rgba(0,0,0,0.35);

28	font-family: Arial, Tahoma, sans-serif;

29	-webkit-transition: all linear .2s;

30	-moz-transition: all linear .2s;

31	-o-transition: all linear .2s;

32	-ms-transition: all linear .2s;

33	transition: all linear .2s

34

}

35	.blu-btn:hover, .blu-btn:focus {

36	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;

37	-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;

38	box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 012px 20px 2px #3089d8;

39

}

40	.blu-btn:active {

41	-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);

42	-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);

43	box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);

44

}

45

46

47	.grn-btn {

48	display: inline-block;

49	-moz-border-radius: .25em;

50	border-radius: .25em;

51	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);

52	-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);

53	box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);

54	background-color: #659324;

55	background-image: -moz-linear-gradient(#81bc2e,#659324);

56	background-image: -ms-linear-gradient(#81bc2e,#659324);

57	background-image: -webkit-gradient(linear,left top,leftbottom,color-stop(0%,#81bc2e),color-stop(100%,#659324));

58	background-image: -webkit-linear-gradient(#81bc2e,#659324);

59	background-image: -o-linear-gradient(#81bc2e,#659324);

60	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0);

61	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)";

62	background-image: linear-gradient(#81bc2e,#659324);

63	border: 0;

64	cursor: pointer;

65	color: #fff;

66	text-decoration: none;

67	text-align: center;

68	font-size: 16px;

69	padding: 0px 20px;

70	height: 40px;

71	line-height: 40px;

72	min-width: 100px;

73	text-shadow: 0 1px 0 rgba(0,0,0,0.35);

74	font-family: Arial, Tahoma, sans-serif;

75	-webkit-transition: all linear .2s;

76	-moz-transition: all linear .2s;

77	-o-transition: all linear .2s;

78	-ms-transition: all linear .2s;

79	transition: all linear .2s;

80

}

81	.grn-btn:hover, .grn-btn:focus {

82	-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;

83	-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;

84	box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 012px 20px 2px #85ca26;

85

}

86	.grn-btn:active {

87	-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);

88	-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);

89	box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6pxrgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);

90

}