问题标签 [css-gradients]

我想创建两个渐变。一个高度为 786px，然后一个高度为 100%。

这是我尝试过的：

最下面的似乎没有生效。关于我错过了什么的任何线索？

工作jsfiddle：https ://jsfiddle.net/8yqdfve2/5/

我正在尝试使用 CSS 创建“焦点”效果。我设法添加了一些背景颜色并使用径向渐变来创建几乎我想要的东西。请参阅下面的笔（在笔中，为了简单起见，我使用了 img 而不是视频）：

有没有办法添加模糊滤镜而不是不透明度？

我找到了这个，但正如对该答案的评论中提到的，我想要一个允许动态内容而不复制 html 标签的解决方案（不想处理 2 个视频元素......）

我使用这种方法制作了渐变文本；

但是当我查看页面上的渐变时，是这样的：

有谁知道为什么会这样？谢谢。

PS 文字为斜体，使用 Ubuntu Italic 字体。

我正在尝试创建一个加载DIV，其边框看起来像一个不确定的进度环微调器。

根据https://css-tricks.com/gradient-borders-in-css/上的示例之一，我非常接近

当边框不旋转时，这很棒。当您border在:before元素中设置 以匹配元素中的透明border时，gradient-box静态渐变边框看起来很完美。

但是，一旦添加了动画，因为整个:before元素会旋转，您会得到一个非常奇怪的效果 - 如下例所示。

我试过玩溢出：隐藏；但是边框只是消失了..有什么方法可以“屏蔽” :before 元素，以使该加载 Div 后面的任何内容在其后面仍然可见，从而使边框保持其预期宽度？

基本上，我的目标是旋转中的颜色渐变border以产生旋转/旋转边缘的效果。

一位设计师想出了这种类型的背景，如下图所示。我想避免使用图像背景。因此，如果可以使用 CSS 背景属性复制它，我正在尝试解决这个问题。

最低层只是一个线性梯度，没有问题。但是叠加在上面的圆形并不那么容易（如果可能的话）。

我的第一个想法是为圆形使用各种径向渐变，但正如您所见，这些形状具有线性填充并且需要透明背景，以便圆形淡出。我看不出如何实现这一点，但我不是 CSS 专家，所以我想听听对此的一些意见。

我得到了一个使用圆锥渐变构建的进度条，但它的边缘看起来并不锋利。我在网上找到了一些建议，但到目前为止似乎都没有。这是整个进度条的小提琴。

知道如何平滑它的边缘吗？

谢谢

我想在 Navlink 组件中使用以下 css 属性。在 CSS 文件中，属性可以写成下面给出的使用gradient.

在使用 in react 时，将它们作为tabStyle如下所示的变量，我知道：

• background-size更改为backgroundSize
• background-image更改为backgroundImage
• background-position更改为backgroundPosition

但是我们如何使用linear-gradient呢？

导航栏代码：

没有这个梯度代码怎么写calc？

这就是我试图弄清楚该怎么做。https://jsfiddle.net/gwrcep3q/

如何将红色圆圈渐变更改为正方形？

这就是我想要在代码中做的所有事情。

这可以做到吗？

https://jsfiddle.net/ub1nyfqj/

如代码片段、图像和 jsfiddle 所示，当浏览器窗口变小时，绿色线性渐变线不会保持相同的高度/厚度。

这将如何解决？

代码使用百分比，因此，线条粗细应该同时变化。

这在代码中是如何固定的？

https://jsfiddle.net/ar4oe8m0/

线条应保持相同的粗细。

图片

图片