线性渐变是一种颜色区域,其从一种颜色平滑地变化到另一种颜色(或多于两种颜色)。
为什么 1 个 div 上没有应用 2 个线性渐变(Tailwind CSS)
我需要开发的div是这样的: 我为此编写的代码是:
应用了太多线性渐变文本样式,尽管它与 Figma 设计风格相同
我正在尝试在 Figma 中复制线性渐变文本的设计。这是我的代码,是我从某处的一篇文章中获得的:
我可以在 SVG 中使用带有 defs-section 的线性渐变,例如: 我可以在 SVG 中使用带有 defs-section 的线性渐变,例如: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> </defs> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 我可以使用没有 defs-section 的线性渐变吗? 我发现这样的东西: <rect style="fill:lineargradient(foo)"> <defs> 仅用于结构化目的,其中的元素不会显示,但由于渐变仅在应用于形状或其他元素时才可见,因此您可以在文档的任何位置定义它。 但是你仍然必须坚持正确的语法: <rect style="fill:url(#myLinearGradient1)" ... /> 如果对这是否有效有疑问,这里是问题中的确切代码,作为可执行堆栈片段: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> </defs> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 这是完全相同的代码,没有 <defs>/<\defs>: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg> 上述两个可执行代码片段都显示了预期的结果(至少在 chrome 和 firefox 中),这是一个填充有渐变的 100x100 矩形(绿色阴影垂直变化): 是的,你确实可以拥有渐变而不需要 defs 元素;您只需将渐变元素放在代码中的其他位置即可,例如这样: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <linearGradient id="myLinearGradient1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad"> <stop offset="0%" stop-color="#00cc00" stop-opacity="1"/> <stop offset="100%" stop-color="#006600" stop-opacity="1"/> </linearGradient> <rect x="0" y="0" width="100" height="100" style="fill:url(#myLinearGradient1)" /> </svg>
我想知道是否可以根据字段或参数值为折线图创建自定义渐变着色。根据我的研究,这似乎不可能,因为我找不到......
我想知道是否可以根据字段或参数值为折线图创建自定义渐变着色。根据我的研究,这似乎不可能,因为我找不到......
有一个渐变,定义如下: 有一个渐变,定义如下: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow"> <defs> <!-- Gradients for circle charts. --> <linearGradient id="circle-graph-blue-greenish-gradient"> <stop offset="0" stop-color="#00d5bd" /> <stop offset="100" stop-color="#24c1ed" /> </linearGradient> </defs> </svg> 它在 CSS 类中被引用,应用于另一个 <path> 中的 <svg>: .circle-graph-blue-greenish { stroke: url(#circle-graph-blue-greenish-gradient); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } svg { height: 50vh; } <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="out-of-flow"> <defs> <!-- Gradients for circle charts. --> <linearGradient id="circle-graph-blue-greenish-gradient"> <stop offset="0" stop-color="#00d5bd" /> <stop offset="100" stop-color="#24c1ed" /> </linearGradient> </defs> </svg> <svg class="rotate-90" width="75%" viewBox="0 0 100 100"> <path class="circle-graph-underlay" d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50"></path> <path d="M5,50 A45,45,0 1 1 95,50 A45,45,0 1 1 5,50" class="circle-graph circle-graph-blue-greenish" style="stroke-dashoffset: 251.677;stroke-dasharray: 282.783;"></path> </svg> 效果很好。我想将渐变定义移至 CSS 类中: .circle-graph-blue-greenish { stroke: linear-gradient(0deg, rgba(0,213,189,1) 0%, rgba(36,193,237,1) 100%); stroke-width: 5; fill: transparent; stroke-linecap: round; stroke-linejoin: round; } 但不幸的是它已经停止工作(没有可见的中风)。 为什么这两个定义不相同?如何在 CSS 中定义 stroke 的渐变? UPD 看来我可以移动颜色值: <stop offset="0" stop-color="var(--circle-graph-blue-greenish-gradient-color-1)" /> 总比没有好。 想要在 CSS 中完成所有事情。 .pie { --my-color-1: #00d5bd; width: 200px; aspect-ratio: 1; border-radius: 50%; background-image: radial-gradient(circle, black 60%, transparent 60%), conic-gradient(transparent 75%, var(--my-color-1) 75%, var(--my-color-1) 84%, orange 84%, orange 92%, red 92%), radial-gradient(circle, black 65%, transparent 65%); } <div class="pie"></div>
我在尝试让 2 色线性渐变中途停止而不以第二种颜色结束时遇到麻烦。 所以我们的想法是使用线性梯度来显示已经消耗了多少带宽......
我想向图例渐变栏添加一条线。 这就是我的传奇的样子: 在此输入图像描述 我想要的是这样的: 在此输入图像描述 我的代码: 主地图 <- ggplot() +
我正在建立一个具有相当特殊背景的小型网站。 我的目标是将蒙版背景图像渐变应用于重复的背景图像图案(flowers.png),以一种...
我制作了一个动画,指示倒计时直到吐司通知消失: .toastDiv { 动画:toastProgress 3s 缓动; 边框: 1px 实心 rgba(0, 0, 0, .5); 博...
我想要实现一种效果,当用户将鼠标悬停在 div 上时,它的背景颜色会变成渐变,重复地使用纯 CSS 平滑地从一个角切换到另一个角。
我正在尝试创建一个垂直线性渐变,即从顶部中心到底部中心,如下图所示。 我想出了这段代码,它创建从左上角到右下角的对角渐变。哈...
我已经看到了线性渐变是如何完成的,就像这个答案:我们可以在 xml 中为 android 背景制作多颜色渐变吗? 每次我尝试使用径向渐变时,视口都无法...
我开始使用CSS渐变,而不是实际的图像,有两个原因:首先,CSS渐变加载速度肯定比图像更快,其次,它们不应该显示条带,就像这样...
我尝试在 flutter 中创建一个渐变按钮,但在 ElevatedButton 中,即使颜色设置为透明,也会显示一些阴影或其结构。 这里我使用DecoratedBox来申请
我的 html 页面顶部有一个渐变背景,我希望它保持在顶部,这样它就不会超出我的导航栏。它一直停留在顶部,直到我放入图像,背景跟随图像......
我正在使用 bootstrap 的 12 列网格布局,我想制作一个覆盖网格列和排水沟的“开发助手”,这样我们就可以可视化网格来帮助非开发人员...
我正在尝试在背景图像上显示线性渐变,以便更轻松地阅读图像上的文本。但由于缺乏文档,要做到这一点并不容易。我想要完成一些事情...
这给了我一个动画渐变效果。 这里的问题是,当我使卡片的背景透明或者在我的情况下我想应用玻璃形态的背景滤镜时,渐变