使渐变边框看起来像一条线

Question

如何使颜色之间的渐变边框看起来像一条线？是否还有一种方法可以在左下角而不是按钮右侧中间开始线？我正在使用这个css：

background: linear-gradient(to right bottom, #00C9FF 30%, black 50%)

Answer 1

您可以使用以下代码获得预期结果：

＆＃13;

＆＃13;

div {
  background: linear-gradient(to right bottom, #00C9FF calc(50% - 1px), black calc(50% + 1px));
  border:7px solid #00C9FF;
  color:#fff;
  height:100px;
  line-height:100px;
  text-align:center;
  width:100px;
}

＆＃13;

<div>Test</div>

＆＃13;

＆＃13;

＆＃13;

需要calc()才能使线条平滑。否则边框在某些浏览器上看起来很奇怪。

Answer 2

您应该将两种颜色移动到相同的位置：

background: linear-gradient(to right bottom, #00C9FF 30%, black 30%);