按钮边框颜色问题

时间:2015-08-14 11:55:49

标签: html css button

我创建了一个包含以下HTML和CSS代码的按钮。

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border-color: #E8E8E8;
    
}
<button type="button" class="btnstyle2">Dismiss</button>

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

6 个答案:

答案 0 :(得分:7)

该按钮使用默认样式。通过将边框设置为实线将覆盖默认样式。

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

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border: 2px solid #E8E8E8;
}
<button type="button" class="btnstyle2">Dismiss</button>

答案 1 :(得分:3)

你有一个初始样式,这是按钮中的默认值(例如输入中的插入)。 如果你需要一个实线边框,请添加:

 border-style: solid;

你可以查看它:

.btnstyle2{
    height: 28px;
    text-align: center;
    background-color: #F8F8F8;
    border-radius: 3px;
    border-color: #E8E8E8;
    border-style:solid;
}
<button type="button" class="btnstyle2">Dismiss</button>

答案 2 :(得分:1)

将此用于边框。     border:1px solid#e8e8e8;

答案 3 :(得分:1)

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

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;
}

答案 4 :(得分:0)

您可以使用 border: border-color: 属性,用于在 CSS中设置边框样式 STRONG>。您也可以在一行中修改border-colorborder-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>

答案 5 :(得分:0)

请尝试这个:

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