css - 我如何添加 CSS repeat y 使边框垂直

Question

需要垂直对齐 css 生成的边框...我如何在这里使用 background-repeat: repeat-y :

    .container::after { 
  position:absolute;
  bottom: -50px;
  left: 0px;
  width: 100%;
  content:" ";
  background: 
  radial-gradient(circle at 50% 0%, white 25%, #535353 26%, gray 40%);
  background-color: gray;
  background-size:50px 100px;
  height:50px;
  background-repeat: repeat-x;
}

谢谢

Answer 1

您需要将垂直值转换为水平值，反之亦然:

.container {
  position: relative;
  width: 50%;
  height: 100vh;
}

.container::after {
  position: absolute;
  right: -50px; /* bottom: -50px; */
  top: 0; /* left: 0 */
  width: 50px; /* width: 100% */
  height: 100%; /* height: 50px; */
  content: "";
  background: radial-gradient(circle at 0% 50%, white 45%, #535353 46%, gray 60%);
  background-color: gray;
  background-size: 50px 50px; /* background-size: 50px 100px; */
  background-repeat: repeat-y; /* background-repeat: repeat-x; */
}

<div class="container"></div>