如何在html按钮上添加文本大纲答案

【问题标题】：How to add text outline on html button如何在html按钮上添加文本大纲
【发布时间】：2018-07-13 11:37:54
【问题描述】：

我想让按钮文字像这样

任何帮助将不胜感激。

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

【解决方案1】：

这是Kyle前段时间针对同一个问题提供的解决方案。

.strokeme
{
    color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
    
}

<div class="strokeme">
    TEST
</div>

【讨论】：

【解决方案2】：

您可以添加：

background: -webkit-linear-gradient(-86deg, blue, #Fefefe);
-webkit-background-clip: text;
-webkit-text-stroke: 20px transparent;

到您的文本 css。

代码笔。 https://codepen.io/anon/pen/qyOROr

【讨论】：

【解决方案3】：

其他解决方案与我的类似，但我只是在 button 上添加了 CSS

button {
    background: -webkit-linear-gradient(#02bbff, #258eb5);
    color: #fff;
    cursor: pointer;
    font-size: 75px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
    -moz-background-clip: text;
    -moz-text-stroke: 15px transparent;
    -webkit-background-clip: text;
    -webkit-text-stroke: 15px transparent; 
}

&lt;button type="button"&gt;Enter&lt;/button&gt;

【讨论】：