使用CSS3 Box Shadow的10种创作技巧

最新推荐文章于 2024-01-05 17:54:33 发布

cune1359

最新推荐文章于 2024-01-05 17:54:33 发布

阅读量320

点赞数

文章标签： css java html web google

在过去的几年中，我们已经看到CSS3网络开发方面的巨大进步。互联网上的流行网站已开始采用许多独特的样式，例如圆角和响应移动设备的媒体查询。但是，更重要的是，这为在几分钟之内完成原型制作的创新接口打开了大门。

在本文中，我想分享10个与出色CSS3盒子阴影设计有关的代码片段 。我将解释代码的工作原理，以及如何将每个box shadow实施到自己的网站中。

这些样式都归功于其他流行网站的强大设计影响力。这是一个很好的例子，说明当前的Web开发人员如何为Web设计的未来构建有影响力的趋势。

1.固定顶部工具栏

罗马尼亚社交媒体服务Trilulilu在整个网站上使用顶部浮动工具栏。可以使用以下position: fixed;快速创建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');
}

可以将导航链接设置为样式，以在选中时或在鼠标悬停时更改颜色。我还在链接上和下拉菜单框中添加了一些圆形边框。这给人一种更好的感觉，而不是周围都有坚硬的边缘。我还充分利用了Internet Explorer专有的-ms-filter和filter属性。

如果您设置了完整的导航系统，则可以在页面加载后将显示设置更改为无，并隐藏菜单。然后使用一些jQuery，您可以定位.hover（）事件并显示具有更新内容的子导航栏。

演示版

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, 256, .35);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4495e7,EndColorStr=#0053a6);
}

.blues:hover {
border-color: #002d59 #002d59 #000;
-moz-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-ms-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 rgba(256, 256, 256, 0.55), 1px 1px 3px rgba(0, 0, 0, .25);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#3a8cdf ,EndColorStr=#0053a6);
background-image: -moz-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -ms-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -o-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3a8cdf),color-stop(100%,#0053a6));
background-image: -webkit-linear-gradient(top,#3a8cdf 0,#0053a6 100%);
background-image: linear-gradient(to bottom,#3a8cdf 0,#0053a6 100%);
}

.blues:active {
border-color: #000 #002d59 #002d59;
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-ms-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.2),0 1px 0 #fff;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#005ab4,EndColorStr=#175ea6);
background-image: -moz-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -ms-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -o-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#005ab4),color-stop(100%,#175ea6));
background-image: -webkit-linear-gradient(top,#005ab4 0,#175ea6 100%);
background-image: linear-gradient(to bottom,#005ab4 0,#175ea6 100%);
}

整个按钮代码很多，但是我们正在尝试支持尽可能多的浏览器。 有文本阴影和框阴影以及对MS Internet Explorer 7+的支持。另外，我们还在大量供应商特定的前缀上使用CSS3渐变设置了background-image属性。

但是，如果您喜欢这种设计风格，那么悬停和活动状态也会引起您的注意 。基本上，我们会在下推边框时更新边框以在其中包含一些阴影，同时会更新背景渐变以使其显得更暗。

由于按钮上没有图像，因此您可以更新十六进制值并将其变形以融合到几乎任何配色方案中。

演示版

4.通知弹出菜单

我不是Facebook的大用户，但是我从他们的重新设计中注意到了一些UI技术。可以将此弹出菜单与您在主页上找到的通知或朋友请求弹出窗口进行比较。

.flyout {
width: 310px;
margin-top: 10px;
font-size: 11px;
position: relative;
font-family: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif;
background-color: white;
padding: 9px 11px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #c5c5c5;
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-moz-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.flyout #tip {
background-image: url('images/tip.png');
background-repeat: no-repeat;
background-size: auto;
height: 11px;
position: absolute;
top: -11px;
left: 25px;
width: 20px;
}

.flyout h2 {
text-transform: uppercase;
color: #666;
font-size: 1.2em; 
padding-bottom: 5px;
margin-bottom: 12px;
border-bottom: 1px solid #dcdbda;
}
.flyout p { padding-bottom: 25px; font-size: 1.1em; color: #222; }

这里没有很多新的提示代码可以显示。我正在使用带有内部span元素的小.tip类来添加工具提示三角形。您可以想象，可以创建纯CSS3三角形，但是这种方法并不容易。如果您喜欢这种方法，可能值得一起学习。但是CSS3旋转属性并非在所有地方都受支持。同时，图像不需要任何后备方法。

演示版

5.苹果Page Wrapper

在Apple的官方网站上可以找到太多令人印象深刻CSS3盒子阴影。下面的示例是一个带有几个列跨度的小盒子容器。查看Apple的布局时，您会注意到他们的许多页面都是由许多包装盒组成的。

.applewrap {
width: 100%;
display: block;
height: 150px;
background: white;
border: 1px solid;
border-color: #e5e5e5 #dbdbdb #d2d2d2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}


.applewrap .col {
float: left;
box-sizing: border-box;
width: 250px;
height: 150px;
padding: 16px 7px 6px 22px;
font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
color: #343434;
border-right: 1px solid #dadada;
}

您可以将类似的页面放在一起，并按宽度和高度不同的内容框进行拆分。尽管我已在此演示中添加了几列，但无论如何它都不是必需的格式化技术。框阴影最适合白色/灰色背景。但我认为在任何浅色下显示效果都不错。

演示版

6.苹果内容框

Apple网站上的其他样式的内容框主要用于列设计。这些主要位于页面底部，显示交易和其他相关信息。这是一种完全不同的设计风格，盒子阴影从上到下显示在内部。

.applebox {
width: auto;
height: 85px;
box-sizing: border-box;
background: #f5f5f5;
padding: 20px 20px 10px;
margin: 10px 0 20px;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);
}

.applebox .col {
width: 140px; 
float: left;
margin: 0 0 0 30px;
}

我认为该代码不应很难遵循并复制到另一个div容器中。我们要应用的唯一框阴影是对rgba alpha透明颜色代码使用inset 。因此，尽管我们将阴影设置为纯黑色，但我们仅显示了约30％的不透明度。

演示版

7.精选链接

这可能是苹果当前网站上我最喜欢的盒子阴影样式。您应该在iCloud页面上找到带有一系列浮动链接框的此技术的实时演示风格。

.applefeature {
height: 150px;
margin: 8px;
vertical-align: top;
display: inline-block;
}

.applefeature a {
display: block;
width: 168px;
height: 140px;
border: 1px solid #ccc;
color: #333;
text-decoration: none;
font-weight: bold;
line-height: 1.3em;
background: #f7f7f7;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.applefeature a:hover {
background: #fafafa;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f7f7f7));
background: -moz-linear-gradient(100% 100% 90deg, #f7f7f7, #fff);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); 
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); 
box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius: 4px;
}

.applefeature a img { 
display: block;
margin: 26px auto 4px;
}
.applefeature a h4 {
display: block;
width: 160px;
font-size: 1.3em;
font-family: Arial, Tahoma, sans-serif;
color: #646464;
text-align: center;
}

这些特色链接设置为固定宽度，并包含一个不同的图标和显示文本。 Apple的示例使用了与上一个内容框类似的框阴影。但是，现在可以将整个框激活为包含:hover和:active状态的链接。此链接框具有很大的灵活性，您应该尝试使用源代码。

可以缩短高度/宽度并创建更小的链接列表。这些可以是文章中的一组章节或页面，也可以使子菜单受链接图标的限制。老实说，这是一整套崭新CSS3技术，可证明您作为Web设计师所具有的强大能力。

演示版

8.镜框图像

我在此示例中添加了灰色背景，以便您可以更清楚地看到框阴影样式。该框类似于wordpress.com上的精选预览图，但我在源代码中添加了更多的深度。

.wpframe {
background: #fff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
padding: 8px;
-webkit-box-shadow: 1px 2px 1px #d1d1d1;
-moz-box-shadow: 1px 2px 1px #d1d1d1;
box-shadow: 1px 2px 1px #d1d1d1;
}

由于图像的两边都有小填充，因此该框显示为大的白色边框。您始终可以更新背景颜色，甚至可以添加较小的外部边框以将图像与背景分开。但是，可以将这种相当简单的样式集运用到各种盒子阴影技术中。玩转代码，看看如何改善自己网站上的图像设计。

演示版

9.发光的输入字段

在访问Pinterest登录页面几次后，我有了这个想法。他们的动画风格确实展示了一些雄辩的例子，包括内部和外部多个内嵌框阴影。

.formwrap { display: block; margin-bottom: 15px; }
.formwrap label { 
display: inline-block; 
width: 80px; 
font-size: 11px; 
font-weight: bold; 
color: #444; 
font-family: Arial, Tahoma, sans-serif; 
}

.formwrap .shadowfield {
position: relative;
width: 250px;
font-size: 17px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: normal;
background: #f7f8f8;
color: #7c7c7c;
line-height: 1.4;
padding: 6px 12px;
outline: none;
transition: all 0.2s ease-in-out 0s;
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
border: 1px solid #ad9c9c;
border-radius: 6px 6px 6px 6px;
box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
}
.formwrap .shadowfield:focus {
border-color: #930; 
background: #fff;
color: #5d5d5d;
box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
}

尽管初始样式非常吸引人，但是当您专注于每个输入字段时，我会被过渡效果所吸引。您可以在它们之间进行制表，以查看许多属性中的直接差异。将应用外部发光框阴影以及更新的插图阴影。此外， 当您专注于特定输入时，文本颜色会变浅，而当您散焦时 ， 文本颜色会淡出。

即使复制其中一种效果，也可以极大地改善表单域的用户体验。确保不要过度使用表格以至于几乎无法使用。但是，大多数访问者将享受令人愉悦的美学效果，这也鼓励与您的网站进行交互和进一步参与。

演示版

10.弹性阴影按钮

这些独特的阴影按钮的样式在悬停和活动状态下具有缓慢的过渡。您可以在Mozilla主页上找到带有大型“下载Firefox”按钮的类似示例。实际上，一些box-shadow属性将三个不同的阴影组合到一个命令中。

.blu-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #276195;
background-image: -moz-linear-gradient(#3c88cc,#276195);
background-image: -ms-linear-gradient(#3c88cc,#276195);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#3c88cc),color-stop(100%,#276195));
background-image: -webkit-linear-gradient(#3c88cc,#276195);
background-image: -o-linear-gradient(#3c88cc,#276195);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc',endColorstr='#276195',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c88cc', endColorstr='#276195', GradientType=0)";
background-image: linear-gradient(#3c88cc,#276195);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s
}
.blu-btn:hover, .blu-btn:focus {
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #3089d8;
}
.blu-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}


.grn-btn {
display: inline-block;
-moz-border-radius: .25em;
border-radius: .25em;
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.2);
background-color: #659324;
background-image: -moz-linear-gradient(#81bc2e,#659324);
background-image: -ms-linear-gradient(#81bc2e,#659324);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#81bc2e),color-stop(100%,#659324));
background-image: -webkit-linear-gradient(#81bc2e,#659324);
background-image: -o-linear-gradient(#81bc2e,#659324);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e',endColorstr='#659324',GradientType=0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#81bc2e', endColorstr='#659324', GradientType=0)";
background-image: linear-gradient(#81bc2e,#659324);
border: 0;
cursor: pointer;
color: #fff;
text-decoration: none;
text-align: center;
font-size: 16px;
padding: 0px 20px;
height: 40px;
line-height: 40px;
min-width: 100px;
text-shadow: 0 1px 0 rgba(0,0,0,0.35);
font-family: Arial, Tahoma, sans-serif;
-webkit-transition: all linear .2s;
-moz-transition: all linear .2s;
-o-transition: all linear .2s;
-ms-transition: all linear .2s;
transition: all linear .2s;
}
.grn-btn:hover, .grn-btn:focus {
-webkit-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
-moz-box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
box-shadow: 0 2px 0 0 rgba(0,0,0,0.1), inset 0 -2px 0 0 rgba(0,0,0,0.3), inset 0 12px 20px 2px #85ca26;
}
.grn-btn:active {
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.2), inset 0 12px 20px 6px rgba(0,0,0,0.2), inset 0 0 2px 2px rgba(0,0,0,0.3);
}

我在悬停和活动按钮状态下使用200毫秒的完整过渡。这些样式的优点在于，您几乎可以将它们应用于任何可单击的元素。按钮，锚点链接，表单元素或您认为合适的任何其他内容–尽管应稀疏使用这些样式，以免使设计过载。

这样的按钮通常以与Mozilla使用它们相同的方式保存得最好。将这些样式附加到博客中，那里有用于免费下载或类似按钮的按钮。 用户喜欢与独特的界面进行交互，这通常会为您的点击率带来更高的百分比。

演示版

最后的想法

我希望您可以从这套盒阴影技术中汲取一些宝贵的经验。您可以关注许多不同的领域，包括表单，模式框，按钮，工具栏，甚至是完整的网站布局。

随意将这些阴影效果实施到您自己网站的各个部分中。还有很多其他技术，但是对于初学者和高级开发人员来说，此收藏非常理想。另外，如果您对文章有任何建议或疑问，可以在下面的评论讨论区与我们分享。

翻译自: https://www.hongkiat.com/blog/css3-box-shadows-effects/

cune1359

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用CSS3 Box Shadow的10种创作技巧

在过去的几年中，我们已经看到CSS3网络开发方面的巨大进步。互联网上的流行网站已开始采用许多独特的样式，例如圆角和响应移动设备的媒体查询。但是，更重要的是，这为在几分钟之内完成原型制作的创新接口打开了大门。在本文中，我想分享10个与出色CSS3盒子阴影设计有关的代码片段。我将解释代码的工作原理，以及如何将每个box shadow实施到自己的网站中。这些样式都归功于其他流行...
复制链接

扫一扫