是否可以在 CSS 中设置线性渐变的长度？答案

【问题标题】：Is it possible to set the length of a linear gradient in CSS?是否可以在 CSS 中设置线性渐变的长度？
【发布时间】：2016-06-18 19:54:58
【问题描述】：

在 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/

【问题讨论】：

不，渐变扩展了它作为背景的元素的全宽/全高。充其量您可以使渐变在其长度的一部分上透明。
抱歉，我不太理解预期的输出。是不是类似于this。如果不能，您可以为代码中的渐变制作您期望的输出图像吗？也许只是我，但我也无法从眼睛的图像中分辨出来。

标签： html css

【解决方案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/

【讨论】：

我会说你的第二把小提琴是 OP 想要的。但我可能是错的......