在 html 和 css 边框底部和右侧保持黑色答案

【问题标题】：In html and css Border bottom and right stays black在 html 和 css 边框底部和右侧保持黑色
【发布时间】：2019-11-10 15:58:14
【问题描述】：

我创建了按钮并希望边框为绿色。由于某种原因 - 只有左边框和上边框会改变颜色。我尝试明确添加边框底部颜色和右边框颜色，但没有帮助...

.main-table
{
  //width: 40%;
  //margin-top: 2%;
  margin-left: 20%;
  border-thick: 10px;
  border-color: green;
  border-bottom-color: green;
}



.sub-button{
  border-thick: 10px;
  border-color: green;
  border-bottom-color: green;
  border-right-color: green;
  height: 100px;
  width: 100%;
  font-family: calibary;
  background-color: white;
}



th, tr, td {
  text-align:center;
  padding:5px;
  border-thick: 10px;
  border-color: green;
  border-bottom-color: green;
}

<table class="main-table" >
<tr>
  <td><button class="sub-button" type="button" id="reports" accessKey=0  align="middle" [routerLink]="['../../reports/historical-data']"><h4>Reports</h4><h6>Access and review daily and weekly statistics</h6></button></td>
  <td><button class="sub-button" type="button" id="documents" accessKey=0 size="lg"  align="middle" [routerLink]="['../../documentation/product-documentation']"><h4>Documentation</h4><h6>Download the latest product specification</h6></button></td>
</tr>
<tr>
  <td><button class="sub-button" type="button" id="test" accessKey=0 size="lg"  align="middle" [routerLink]="['../../test-diagnostics/live-query']"><h4>Test a Number</h4><h6>Discover a numbers attributes across all services</h6></button></td>
  <td><button class="sub-button" type="button" id="ticket" accessKey=0 size="lg"  align="middle" [routerLink]="['../../support/ticket']"><h4>Support</h4><h6>Open a ticket with the XConnect Technical team</h6></button></td>
</tr>

谢谢！

【问题讨论】：

使用border: 1px solid green;

标签： html css

【解决方案1】：

您必须使用border-style:solid; 来设置实心边框。你得到的是浏览器显示其首选的border-style 按钮——**outset**（按钮右下边缘的较暗阴影）。见：https://jsfiddle.net/9txgjLzk/

.sub-button{
border-style:solid;
border-width: 10px;
border-color: green;
}

使用border-width 而不是border-thick

【讨论】：