css - CSS中的OS X Yosemite菜单背景模糊

我正在寻找一种方法来获得OS X 10.10在CSS中工作的模糊背景效果。使用filter:blur或SVG高斯滤镜进行模糊处理也会使边框模糊，因此将无法使用。

这是一个效果示例:

最佳答案

您可以使用Css3和JS，如article中所述。您可以在下面找到一段Css代码，有关完整的工作示例，请引用下面的原始文章和 fiddle :

/* TRANSFORMATIONS */
 .glass.down {
 /* Fallback for browsers that don't support 3D Transforms */
 transform: translateY(100%) translateY(-7rem);
 transform: translateY(100%) translateY(-7rem) translateZ(0);
}

.glass.down::before {
 transform: translateY(-100%) translateY(7rem);
 transform: translateY(-100%) translateY(7rem) translateZ(0);
}

.glass.up, .glass.up::before {
 transform: translateY(0);
 transform: translateY(0) translateZ(0);
}

观看此演示:
http://jsfiddle.net/cQQ9u/