按钮边框颜色问题答案

【问题标题】：Button Border Color Issues按钮边框颜色问题
【发布时间】：2015-08-14 20:29:57
【问题描述】：

我使用以下 HTML 和 CSS 代码创建了一个按钮。

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border-color: #E8E8E8;
    
}

&lt;button type="button" class="btnstyle2"&gt;Dismiss&lt;/button&gt;

我遇到的问题是摆脱比左边框和上边框更暗的右边框和下边框。我需要按钮的整个边框为浅灰色，在 CSS 代码中声明为边框颜色：#E8E8E8。任何帮助都会很棒！谢谢！

【问题讨论】：

jsfiddle.net/utdezr2u

标签： html css button

【解决方案1】：

按钮使用默认样式。通过将边框设置为纯色将覆盖默认样式。

您可以将宽度、样式和颜色的边框声明组合成一行，如下所示：

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border: 2px solid #E8E8E8;
}

&lt;button type="button" class="btnstyle2"&gt;Dismiss&lt;/button&gt;

【讨论】：

不是宽度，是样式... :)
取决于你想要 1 行还是 2 行是假设 @MarcosPérezGude :)
很高兴为@ParkerWilliams 提供帮助。
你这样说：You need to define the width of the button border.这不是真的，是风格。你可以把内联，独立，或者你想要的，但宽度不是问题;）
@tonyedwardspz 你的答案现在更好了；）我支持你

【解决方案2】：

您有一个初始样式，这是按钮中的默认样式（例如，输入中的插图）。如果您需要实心边框，请添加：

 border-style: solid;

您可以查看：

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border-color: #E8E8E8;
    border-style:solid;
}

&lt;button type="button" class="btnstyle2"&gt;Dismiss&lt;/button&gt;

【讨论】：

【解决方案3】：

使用它作为边框。边框：1px 实心#e8e8e8;

【讨论】：

【解决方案4】：

只需覆盖按钮默认类不需要的属性：

button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: buttontext;
    padding: 2px 6px 3px;
    border: 2px outset buttonface; /* bad */
    border-image-source: initial;
    border-image-slice: initial;
    border-image-width: initial;
    border-image-outset: initial;
    border-image-repeat: initial;
    background-color: buttonface;
    box-sizing: border-box;
}

示例：

.btnstyle2{
    height: 44px;
    width: 46px;
    text-align: center;
    border-radius: 3px;
    border-color: #E8E8E8;
    border: none; /* new here */
    background: url('https://www.linkedin.com/scds/common/u/images/logos/linkedin/logo_in_nav_44x36.png') left center no-repeat;
}

【讨论】：

【解决方案5】：

您可以使用 border-color: 的 border: 属性来设置 CSS 中的边框样式。您也可以像下面显示的那样在一行上编辑border-color、border-style。

CSS：

.btnstyle2{
   height: 28px;
   text-align: center;
   background-color: #F8F8F8;
   border:2px solid #E8E8E8;
   border-style:solid;
}

HTML：

<button type="button" class="btnstyle2">Dismiss</button>

【讨论】：

【解决方案6】：

请试试这个：

HTML

<button type="button" class="button1">Demo button</button>

CSS：

.button1{
    height: 28px;
    text-align: center;
    background-color:#F3F3F3;
    border-radius: 3px;
    border-color: #E8E8E8;
    border-style:solid;
}

DEMO

【讨论】：