Question

我不知道如何为某些具有圆角和透明模糊背景的按钮创建css类代码，如iOS7所示。
示例图片：
http://i.stack.imgur.com/n3mLR.jpg

Answer 1

简短的回答是你不能，至少不能以任何动态的，跨浏览器兼容的方式（除非你只是模糊SVG，甚至那时支持是可疑的）。 Firefox没有-webkit-filter: blur();的模拟，如果我没记错的话，在IE或Opera中实现类似的东西意味着一堆特定于浏览器的黑客攻击。

filter表明我们正朝着可能发生这种事情的那一天迈进，但在此之前，纯CSS中只能采用静态解决方法。（对于JavaScript替代方案，BlurJS以前对我有用，但它也有其局限性。）

一种方法是，如果您还希望页面背景模糊，可以在Photoshop中创建模糊背景，将其设置为body或其他div，然后将按钮设置为样式这样：

button {
    /* For your border-radius: */
    border-radius: 4px;
    /* This will offer the illusion that it's adopting the
    background beneath it as its own but lightening it --
    almost like IOS. */
    background: #fff;
    opacity: .4;
}

/* Then maybe something like */
button:active {
    background: #000;
    opacity: .4;
}

但也许您希望原始背景图像在焦点上方有一个模糊按钮。好吧，如果你知道你的按钮总是与窗口顶部的距离是Npx，并且你知道你的按钮的高度总是比如60px，那么你可以削减一个背景图像中的全宽 60px高水平条纹，位于模糊图像顶部的Npx处。然后将它们设置为：

.backgroundDiv {
    background: url('path/to/my/originalImage.jpg') center center no-repeat;
    background-size: cover;
 }

.button {
    background: url('path/to/my/blurredImage.jpg') center center no-repeat;
    background-size: cover;
}

这些是你如何去做的基石;可能这些和JS的某些组合可以实现理想的美学。但是，需要注意的是：太多大图像对加载时间没有好处。

Answer 2

您可以通过以下方式获得圆角：

border-radius: 5px

您可以在此处详细了解border-radius：http://www.w3schools.com/cssref/css3_pr_border-radius.asp

对于透明度和模糊，您可以在webkit浏览器中使用-webkit-filter。请参阅示例：https://html5-demos.appspot.com/static/css/filters/index.html

有透明被弄脏的背景的按钮

2 个答案: