我创建了一个包含以下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。任何帮助都会很棒!谢谢!
答案 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-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>
答案 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;
}