在过去几年中，我们看到css3 web开发取得了巨大的进步。互联网上的热门网站已经开始采用许多独特的风格，如圆角和移动响应媒体查询。但更重要的是，这为创意界面打开了大门，可以在几分钟内完成原型设计。
在本文中，我想分享10个与精彩的css3盒子阴影设计相关的代码片段。我将解释代码如何工作以及如何将每个框阴影实现到您自己的网站中。
这些风格都归功于其他热门网站的巨大设计影响力。这是当前web开发人员如何为web设计的未来构建有影响力的趋势的一个很好的例子。
1.修复顶部工具栏罗马尼亚社交媒体服务trilulilu在其整个网站周围使用浮动顶部工具栏。这可以使用position: fixed;任何顶部栏元素上的属性快速创建。但是这个额外的盒子阴影将效果提升到一个全新的水平。
#banner {
position: fixed;
height: 60px;
width: 100%;
top: 0;
left: 0;
border-top: 5px solid #a1cb2f;
background: #fff;
-moz-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
-webkit-box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0px rgba(0, 0, 0, 0.16);
z-index: 999999;
}
#banner h1 {
line-height: 60px;
}
你会注意到box-shadow属性实际上是用一个相当简单的值组合设置的。阴影将落在方框下方，两侧模糊3px。
我们可以使用rgba（）方法在阴影上应用轻微的不透明度，因此元素看起来不会太暗。这是一个微妙的补充，肯定会吸引访客的注意力。
演示2.子导航下拉列表这是另一个应用于标量下拉子菜单的创意框阴影方法。当您将鼠标悬停在每个顶部主导航链接上时，可以在企业家上看到类似的效果。这绝对是一个比较棘手的配置，但值得耐心。
#bar { display: block; height: 45px; background: #22385a; padding-top: 5px; margin-bottom: 150px; position: relative; }
#bar ul { margin: 0px 15px; font-family: candara, calibri, "segoe ui", segoe, arial, sans-serif; }
#bar ul li { background: #22385a; display: block; font-size: 1.2em; position: relative; float: left; }
#bar ul li a {
display: block;
color: #fffff7;
line-height: 45px;
font-weight: bold;
padding: 0px 10px;
text-decoration: none;
z-index: 9999;
}
#bar ul li a:hover, #bar ul li a.selected {
color: #365977;
background: #fff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
}
#bar ul .subnav {
display: block;
left: 14px;
top: 48px;
z-index: -1;
width: 500px;
position: absolute;
height: 90px;
border: 1px solid #edf0f3;
border-top: 0;
padding: 10px 0 10px 10px;
overflow: hidden;
-moz-border-radius-bottomleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-moz-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-webkit-box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
box-shadow: 0px 2px 7px rgba(0,0,0,0.25);
-ms-filter: "progid:dximagetransform.microsoft.shadow(strength=3, direction=180, color='#333333')";
filter: progid:dximagetransform.microsoft.shadow(strength=3, direction=180, color='#333333');
}
导航链接可以设置为在选择时或鼠标悬停时更改颜色。我还在链接和下拉菜单框中添加了一些圆形边框。这样可以提供更好的感觉，而不是周围的硬边。我也善用的-ms-filter和filter哪些是仅仅专属于internet explorer属性。
如果您设置了完整的导航系统，您将能够将显示设置更改为无，并在页面加载后隐藏菜单。然后使用一些jquery，您可以定位.hover（）事件并显示带有更新内容的subnav栏。
演示3.有光泽的阴影按钮这可能是我最喜欢的样式之一，因为它在页面上显示的动态。如果您不知道，这是您首次登录后在youtube主页上找到的小蓝色按钮。
blues {
color: #fff;
width: 190px;
height: 35px;
cursor: pointer;
font-family: arial, tahoma, sans-serif;
font-size: 1.0em;
font-weight: bold;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
border-width: 1px;
border-color: #0053a6 #0053a6 #000;
background-color: #6891e7;
background-image: -moz-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -ms-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -o-linear-gradient(top,#4495e7 0, #0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #4495e7),color-stop(100%, #0053a6));
background-image: -webkit-linear-gradient(top,#4495e7 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#4495e7 0,#0053a6 100%);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .6);
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, .35);
box-shadow: inset 0 1px 0 rgba(256, 256,