标签: linear-gradients

如何制作带有 90 度线的 CSS 背景渐变。应从无线开始，然后是一条实线，最后是 3 条虚线。

如何在 div 背景中指定渐变以实现以下视觉效果？

我能够用 4 个 div 实现外观，但无法提出只有一个 div及其使用渐变的背景属性的解决方案。

我认为即使使用 before 伪元素也是不可能的。

以下是我尝试过的想法，这清楚地表明可以使用 4 个具有线性渐变的 div：

下面是上面例子的代码：

#box1 {
  background-image: linear-gradient(225deg, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%);
  width: 107px;
  height: 116px;
  left: 228px;
  top: 335px;
  position: absolute;
  transform:rotate(-45deg);
}

#box2 {
  background-image: linear-gradient(-45deg, #FF1794 0%, #FFF037 14.81%, #39ED94 27.72%, #00B0EC 50.23%, #FF1794 67.56%, #FFF037 81.76%, #39ED94 100%);
  width: 107px;
  height: 116px;
  left: 308px;
  top: 415px;
  position: absolute;
  transform:rotate(-45deg);
}

#box3 …

如果你阅读长篇文章或在互联网上发帖,当你从下一行的末尾移动你的眼睛时,你会迷路.它发生在我身上,所以我虽然着色行的开头和结尾,行的结尾和下一行的开头都有颜色.保持视觉轨迹.这里是我的意思的一个例子:链接(在宽屏幕上查看链接,对移动视图没有帮助)在CSS中我想将线条渐变水平应用于p标签

1. 每行有三种颜色(左边一个,中间透明,右边另一个颜色)
2. 每三行重复三种颜色模式

到目前为止,我发现它是可行的是只有一个彩色图像的斑马状条带

我希望有什么 形象

关于如何做到这一点的任何想法？我感谢你的帮助.

我目前正在尝试复制此图像： https://i.stack.imgur.com/fymWE.jpg 我正在尝试在背景中制作该渐变，但我不知道如何做到这一点，并且基本上没有任何内容互联网。编辑：如果有帮助的话，我有两端的 RGB 颜色。顶部为 rgb(154,0,254)，底部为 rgb(221,122,80)。

我希望实现一种效果,而不是当用户将鼠标悬停在div上时,它的背景颜色变成了一个渐变,使用纯CSS,可以从一个角平滑地切换到另一个角.

我想要实现的效果,试图将其更多地用于文字,是背景的较暗部分(具有0.9不透明度的部分)在光标保持在元素上方的情况下从一个角落反复滑动到另一个角落.

实际发生的是背景从一个状态跳到另一个状态.我哪里错了？我怎样才能让它成为动画,流畅的效果？

这是我的代码:

#test {
  width: 200px;
  height: 200px;
  background-color: rgba(215, 54, 92, 0.7);
}
@keyframes test_hover {
  from {
    background: -webkit-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, 92, 0.5));    /* For Firefox 3.6 to 15 */
    background: linear-gradient(45deg, rgba(215, 54, 92, 0.9), rgba(215, 54, …

我正在寻找一种从下到上渐变图像的方法

初始与 目标

图像在光滑的滑块中运行。我已经尝试过辐射渐变，但没有任何有用的结果。

如何在Netscape中使用CSS线性渐变？

我正在尝试这段代码:

#gr {
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#000));
    background: -moz-linear-gradient(top,  #ffffff,  #000);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000');
    -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000'); 
}

它适用于IE,Firefox和Chrome,但它不适用于Netscape.