当设置了background linear-gradient时b

  button {
      box-sizing: border-box;
      position: relative;
      padding: 0.3rem 0.8rem;
      border-width: 30px;
      border-style: solid;
      border-color: transparent;
      background: linear-gradient(white, #58a);
      border-radius: 0.2rem;
      box-shadow: 0 0.05rem 0.25rem rgba(0,0,0,.5);
      text-shadow: 0 -0.05rem 0.05rem rgba(0,0,0,.5);
      font-size: 1.25rem;
      line-height: 1.5;
    }

现在的问题是上下那两个线比较迷惑
首先background-origin的默认值是padding-box。所以background的渲染部分是

上下两部分是border的位置
背景的渐变色会按照背景图片进行渲染
border的区域也有背景图，但是背景图图片是从border-top和border-left的位置开始平铺的，所以当背景图片no-repeat的时候，border-top和border-left的背景是背景色不是背景图。只有当背景repeat的时候，border-top和border-left才是背景图，并且border-top和border-left的背景是从图片的下边和右边开始平铺的。