关于 css linear-gradient的疑问?

Question

html:

<div class="notching"></div>

css:

.notching {
      border: 1px solid red;
      width: 100px;
      height: 100px;
      background: linear-gradient(
          45deg,
          #cbcbcb 25%,
          transparent 25%,
          transparent 75%,
          #cbcbcb 75%,
          #cbcbcb
        ),
        linear-gradient(
            45deg,
            #cbcbcb 25%,
            transparent 25%,
            transparent 75%,
            #cbcbcb 75%,
            #cbcbcb
          )
          50px 50px;
      background-color: #fff;
    }

效果如下

疑问:
为什么我第二个 linear-gradient 后面的 50px 50px 不能改成百分比 50% 50%( 任何百分比都无效啊啊啊);
求指教

Answer 1

可以看一看这篇文章background-position百分比原理

我猜想是因为linear-gradient后接的50px 50px 是设置的 background-positon，直接设置像素是可以起效的，但是设置百分比因为没有设置background-size所以不起效。