[英]In html and css Border bottom and right stays black
I created buttons and wants the border to be green.我创建了按钮并希望边框为绿色。 From some reason - only the left and top border change the color.
由于某种原因 - 只有左边框和上边框会改变颜色。 I tried to add explicitly border-bottom-color and right-border-color the it didn't help...
我试图明确添加边框底部颜色和右边框颜色,但它没有帮助......
.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>
Thanks!谢谢!
You have to use border-style:solid;
你必须使用
border-style:solid;
for a solid border.为一个坚实的边界。 What you get is browser displaying its preferred
border-style
for button -- **outset**
(a darker shadow on the bottom right edge of your button).你得到的是浏览器显示其首选的按钮
border-style
- **outset**
(按钮右下边缘的较暗阴影)。 See: https://jsfiddle.net/9txgjLzk/见: https://jsfiddle.net/9txgjLzk/
.sub-button{
border-style:solid;
border-width: 10px;
border-color: green;
}
Use border-width
not border-thick
使用
border-width
而不是border-thick
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.