时间戳

首页 > 解决方案 > 如何添加 CSS 重复 y 以使边框垂直

css - 如何添加 CSS 重复 y 以使边框垂直

问题描述

需要垂直对齐 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;
}

谢谢

标签： css

解决方案

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

.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>

推荐阅读