我可以用 css3 和 html5 得到它吗？（渐变背景、边框渐变、透明度）答案

【问题标题】：can i get it with css3 & html5? (gradient background, border gradient, transparency)我可以用 css3 和 html5 得到它吗？（渐变背景、边框渐变、透明度）
【发布时间】：2012-08-07 10:30:25
【问题描述】：

这是我的按钮的设计（例如不同的背景，缩放 ~1500% 和实际大小）。我如何使用单个元素和一些 css3 或最少的附加元素来做到这一点？ CSS 大师，有人吗？

http://ompldr.org/vZjBudQ/button.png

【问题讨论】：

标签： html gradient opacity css

【解决方案1】：

HTML

<a href="#" class="button"></a>

CSS

.button {
    position: relative;
    z-index: 1;
    display: block;
    width: 22px;
    height: 22px;
    background: -webkit-linear-gradient(#f5f0ee, #e7ddd7);
    background: -ms-linear-gradient(#f5f0ee, #e7ddd7);
    background: -moz-linear-gradient(#f5f0ee, #e7ddd7);
    background: linear-gradient(#f5f0ee, #e7ddd7);
    border: 1px solid #c0b9b3;
    border-radius: 3px;
    box-shadow: inset 0px 1px #fcfbfb, 0px 1px rgba(0, 0, 0, 0.3);
}

.button:before {
    content: "";
    position: absolute;
    left: -4px;
    top: -4px;
    z-index: -1;
    padding: 4px;
    width: 22px;
    height: 22px;
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: -ms-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: -moz-linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
    background: linear-gradient(#f5f0ee, #e7ddd7);
    border-radius: 3px;
    box-shadow: 0px 1px rgba(255, 255, 255, 0.3);
}

JSFiddle.

我认为我唯一无法得到的是渐变边框。

【讨论】：

非常感谢，太酷了！我想我可以使用 :before/:after 来模拟内部跨度和 Modernizr 回退与旧浏览器的真实跨度，呃？
是的，我自己讨厌附加标签，但我无法摆脱它。我会继续努力的。
德普。我很懒惰。我想你现在会更喜欢这段代码。 :)
@user1581655 - 如果我的回答为您的问题提供了解决方案，请单击旁边的复选标记将其标记为已接受。这样做可以让其他人知道您正在从社区中获得价值。并且您会获得 +2 声望！