Question

目前我有一个虚线边框线的标记，因为border在制作实际的dotted边框时非常糟糕。我的标记如下

＆＃13;

.dotted-line {
  background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
  background-repeat: repeat-x;
  background-size: 6px 2px;
  height: 9px;
  width:100%;
  margin: 20px 0 0 0;
}

＆＃13;

<div class="dotted-line"></div>

＆＃13;

然而，我遇到的问题是我希望能够制作相同类型的边框，但是垂直而不是水平。我设置了background-repeat: repeat-x;，但后来我得到了一个实线。是否可以进行垂直radial-gradient？

Answer 1

我用水平边框玩弄了这个垂直虚线边框。看看background-repeat: repeat-y;，它现在是垂直的，background-size也已经改变了。

我更改了width和height以获得相当大的空间。

.dotted-line {
  background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
  background-repeat: repeat-y;
  background-size: 2px 6px;
  height: 100px;
  width: 9px;
  margin: 20px 0 0 0;
}

<div class="dotted-line"></div>

Answer 2

喜欢这个？你忘了改变尺寸了。对不起，如果那不是你问的那个。

＆＃13;

    .dotted-line {
      background-image: radial-gradient(circle closest-side,#3E3E3E calc(100% - .5px),transparent 100%);
      background-repeat: repeat-y;
      background-size: 2px 6px;
      height: 100vh;
      width:10px;
      margin: 20px 0 0 0;
    }

＆＃13;

<div class="dotted-line"></div>

＆＃13;

如何制作垂直径向渐变

2 个答案: