CSS - 按钮的左边框在右侧四舍五入

Question

在Ionic移动应用中，我想向按钮添加一个粗左border。但正如您在屏幕截图中看到的那样，左侧border的右侧似乎是圆形的。

我已经尝试通过将border-radius设置为0来解决此问题，但这没有任何效果。

.button-viztype {
  height: 75px;
  font-size: 1.3em;
  border-style: solid;
  border-left-width: 7px;
  box-shadow: 0px 3px 1px #c3c3c3;
}
.button-distribution {
  border-left-color: #1B3D77;
}
.button-comparison {
  border-left-color: #397EF6;
}
.button-composition {
  border-left-color: #6181B8;
}
.button-relationship {
  border-left-color: #82ADF6;
}

<div class="row">
  <div class="col">
    <button class="button button-distribution button-full button-viztype">
      Distribution
    </button>
  </div>
  <div class="col">
    <button class="button button-comparison button-full button-viztype">
      Comparison
    </button>
  </div>
</div>
<div class="row">
  <div class="col">
    <button class="button button-composition button-full button-viztype">
      Composition
    </button>
  </div>
  <div class="col">
    <button class="button button-relationship button-full button-viztype">
      Relationship
    </button>
  </div>
</div>

Answer 1

您必须重置border

的button

＆＃13;

＆＃13;

button {
  border: 0
}
.button-viztype {
  height: 75px;
  font-size: 1.3em;
  border-style: solid;
  border-left-width: 7px;
  box-shadow: 0px 3px 1px #c3c3c3;
}
.button-distribution {
  border-left-color: #1B3D77;
}
.button-comparison {
  border-left-color: #397EF6;
}
.button-composition {
  border-left-color: #6181B8;
}
.button-relationship {
  border-left-color: #82ADF6;
}

＆＃13;

<div class="row">
  <div class="col">
    <button class="button button-distribution button-full button-viztype">
      Distribution
    </button>
  </div>
  <div class="col">
    <button class="button button-comparison button-full button-viztype">
      Comparison
    </button>
  </div>
</div>
<div class="row">
  <div class="col">
    <button class="button button-composition button-full button-viztype">
      Composition
    </button>
  </div>
  <div class="col">
    <button class="button button-relationship button-full button-viztype">
      Relationship
    </button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以覆盖按钮边框：

https://jsfiddle.net/uwnyds3s/

.button-viztype {
    border: none;
    height:75px;
    font-size: 1.3em;
    border-left-style: solid;
    border-left-width: 7px;
    box-shadow: 0px 3px 1px #c3c3c3;
}

Answer 3

有点难以看到你指的是什么，但你必须首先重置所有的边框宽度

.button-viztype {
  height: 75px;
  font-size: 1.3em;
  border-width: 0;
  border-style: solid;
  border-left-width: 7px;
  box-shadow: 0px 3px 1px #c3c3c3;
}
.button-distribution {
  border-left-color: #1B3D77;
}
.button-comparison {
  border-left-color: #397EF6;
}
.button-composition {
  border-left-color: #6181B8;
}
.button-relationship {
  border-left-color: #82ADF6;
}

<div class="row">
  <div class="col">
    <button class="button button-distribution button-full button-viztype">
      Distribution
    </button>
  </div>

</div>

Answer 4

这是因为你的其他边缘有边框。您可以覆盖默认值并设置如下边框：

.button-viztype {
    border: none;
    border-left: 7px solid #1B3D77;
}

等

Answer 5

＆＃13;

＆＃13;

**Reset your Border of button to none **

.button-viztype {  
    border: none;  
    border-left: 7px solid #1B3D77;  
}

＆＃13;

＆＃13;

＆＃13;