我可以用css3和html5嗎？ （漸變背景，邊框漸變，透明度）

Question

這裏是我的按鈕設計（不同的背景，例如，縮放〜1500％和實際尺寸）。我怎樣才能做到這一點與單個元素和一些css3，或最小的額外元素？ css大師，任何人？

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

Answer 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。

我認爲唯一不能得到的是漸變邊界。