如何创建此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效果？

回答

相关问题