如何創建此CSS效果？

-1

我需要創建一個如下圖所示的按鈕，但是如果不使用圖像，很難獲得邊框效果：如何創建此CSS效果？

。

具體來說，我所看到的邊框效果從來沒有斜面效果 - 這幾乎就像我需要兩個邊框。這裏按鈕的顏色，形狀和其他方面不是問題。

這裏是我到目前爲止，這是非常接近：

button { 
 
    border: 1px solid gray; 
 
    border-radius: 4px; 
 
    text-align: center; 
 
    display: inline-block; 
 
    padding: 5px 10px; 
 
    background: linear-gradient(to bottom, #f9fcff 0%,#93a0c6 100%); 
 
}

<button>OK</button>

來源

2017-08-28 David

你有到目前爲止你已經嘗試什麼的例子嗎？ – luxdvie

我也很想知道爲什麼人們對這個問題進行了投票。 – David

@luxdvie我只是加了一些CSS來告訴你我到目前爲止 – David

你可以用一個元素達到這種效果，使用background: linear-gradient，雙border和border-radius。

要將背景甚至應用到邊框的透明中間部分，請增加背景的大小（即140%）並調整其位置。

button { 
 
    background: linear-gradient(to bottom, #fff 0%, #8ab 100%); 
 
    background-size: 140%; 
 
    background-position: 0 50%; 
 
    border: 4px double #23538a; 
 
    border-radius: 6px; 
 
    padding: 5px 8px; 
 
    color: #23538a; 
 
}

<button>OK</button>

來源

2017-08-28 19:44:31 andreas

這是完美的，謝謝！我從來沒有想過我會在一百萬年內看到一個邊界雙重用例！ – David

不客氣 - 很高興我能幫到你！哈哈是的雙邊框通常沒有太多的用例... – andreas

這將讓你關閉。使用的box-shadow，padding組合，以及「邊界radius`：

.btn-container { 
    display:inline-block; 
    border: solid 1px #224488; 
    border-radius: 4px; 
    padding: 2px; 
    background:#acd; 
    box-shadow:0px 4px 6px #cde inset; 
} 
.btn { 
    display:inline-block; 
    border: solid 1px #224488; 
    border-radius: 4px; 
    padding: 2px; 
    background:#acd; 
    box-shadow:0px 5px 10px #e0f0ff inset; 
} 

<div> 
    <span class='btn-container'> 
    <span class='btn'>Click here!</span> 
    </span> 
</div>

小提琴：https://jsfiddle.net/oqqpccmf/

來源

2017-08-28 19:41:51

如何創建此CSS效果？

回答

相關問題