filter模拟阴影效果

Question

这个网址里面：https://stripe.com/atlas

Stripe: Atlas 网站的两个主按钮，第一次看到它们的时候就觉得这两个按钮的阴影很特别，Hover的手感很柔和，感觉很奇妙，出于本能地就Inspect Element了一下，果然发现了玄妙所在。

.call-to-action .shadow
{
display:block;
position:absolute;
left:1px;
right:1px;
top:4px;
bottom:-4px;
-webkit-filter:blur(7px);
will-change:transform;
transition:transform 1.5s
   cubic-bezier(.2.1,.3,1);
}

使用了-webkit-filter的blur来模拟阴影效果，并且还设置了专门的transition动画曲线

请问下这里玄妙所在。一般的人怎么做这种效果，这个网站怎么做的这个效果呢？

Answer 1

blur 在IE10 以下是不支持的，也会比 box-shadow更加消耗性能。
用 boxshadow + transition，显示出来是另一种视觉效果了。