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

Question

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

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

Answer 1

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

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;
}

<div>Test</div>

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

Answer 2

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

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

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

Making gradient border look like a line

css

gradient

linear-gradients