html - CSS中可以设置线性渐变的长度吗？

Question

在 CSS 中，您可以设置线性渐变的颜色、位置、方向和宽度。但你也可以设置它的长度吗？不，我不想使用 SVG。我对 CSS 解决方案感兴趣。

我想制作类似具有线性渐变的眼睛虹膜的东西:

但是使用线性渐变，你会得到无限长的条纹。是否可以限制该条纹的纬度？

正如我所说，我只能设置颜色、宽度、位置和方向，但不能设置长度:

div {
  height: 100px;
  width: 100px;
  background: white;
  background-image: 
  linear-gradient(45deg, transparent 70px, red 70px, black 72px, transparent 72px),
  linear-gradient(-45deg, transparent 70px, red 70px, blue 72px, transparent 72px),
  radial-gradient(circle at 50px 50px, green 5px, transparent 40px);
}

https://jsfiddle.net/thadeuszlay/vy9o81dy/

Answer 1

您甚至可以在径向渐变中添加开始/停止颜色:https://jsfiddle.net/vy9o81dy/2/

radial-gradient(circle at 50px 50px, transparent 5px,  green 5px,transparent 40px);

---

<edit for feed back/> 或者这也是您尝试做的事情？ https://jsfiddle.net/vy9o81dy/3/