有沒有辦法在CSS中爲HTML按鈕製作三維顏色的按鈕面？

-1

我做了一個快速jsfiddle來說明我的意思。有沒有辦法在CSS中爲HTML按鈕製作三維顏色的按鈕面？

正如你可以看到一個默認的bg顏色按鈕的人看起來像3D，有沒有一種方法可以用CSS複製這個顏色，而不是灰色的一個buttonface？

<body> 
    <button>I have buttonface</button> 
    <button style="background-color:purple;">I don't have buttonface</button> 
</body>

來源

2014-08-28 AgentElevenFifths

這是網絡瀏覽器特定的 – Doorknob 2014-08-28 01:20:41

它是因爲陰影。 – Jay 2014-08-28 01:22:20

陰影是什麼意思？ – AgentElevenFifths 2014-08-28 01:33:37

相信你能

HTML

<button class="styled">I don't have buttonface</button>

CSS

.styled { 
    background: #00d9f6; 
    /* Old browsers */ 
    background: -moz-linear-gradient(top, #00d9f6 0%, #00a4df 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00d9f6), color-stop(100%, #00a4df)); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #00d9f6 0%, #00a4df 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #00d9f6 0%, #00a4df 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #00d9f6 0%, #00a4df 100%); 
    /* IE10+ */ 
    background: linear-gradient(to bottom, #00d9f6 0%, #00a4df 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d9f6', endColorstr='#00a4df', GradientType=0); 
    /* IE6-9 */ 
    border:1px solid #06f; 
    box-shadow:inset 1px 1px 2px #fff; 
    border-radius:5px; 
    padding:2px 
}

fiddle here

編輯：對於那些沒有意識到這一點，你可以使梯度與Colorzilla，這就是我用我的代碼中的漸變

來源

2014-08-28 01:41:13 Devin

不確定這是什麼意思，但你可以嘗試開始邊界，例如，

border: 2px outset gray;

而不是灰色使用你想要的顏色。

Demo

來源

2014-08-28 01:40:03 Oriol

是的，按鈕上的「3D」樣效果是由於使用梯度在背景上。瀏覽器具有按鈕的默認外觀，並按照您的設置設置background-color將以某種方式禁用/覆蓋默認瀏覽器樣式，這就是爲什麼第二個按鈕看起來不好。

/* vendor prefixes omitted */ 
/* will make this button have a reddish gradient as its background */ 
.coloredbutton { 
    ... 
    background-image: linear-gradient(top, #c00, #500); 
    .. 
}

檢查這個搗鼓一個演示：http://jsfiddle.net/arnellebalane/240f2vmu/2/

實現對不同顏色的按鈕類似的「3D」般的效果，你可以使用 linear-gradient()功能的 background-image財產使用梯度樣式表

來源

2014-08-28 05:14:09

有沒有辦法在CSS中爲HTML按鈕製作三維顏色的按鈕面？

回答

相關問題