标签: linear-gradients

我正在尝试将渐变应用于SVG rect元素.

目前,我正在使用该fill属性.在我的CSS文件中:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: #a71a2e;
}

rect在浏览器中查看时,元素具有正确的填充颜色.

但是,我想知道我是否可以对此元素应用线性渐变？

当在具有linear-gradient背景的元素上应用透明边框时,我得到一个奇怪的效果.

请注意,元素的左侧和右侧没有正确的颜色(它们在某种程度上是切换的)并且非常平坦.

HTML

<div class="colors">
</div>

CSS

.colors {
    width: 100px;
    border: 10px solid rgba(0,0,0,0.2);
    height: 50px;
    background: linear-gradient(to right, 
        #78C5D6,
        #459BA8,
        #79C267,
        #C5D647,
        #F5D63D,
        #F08B33,
        #E868A2,
        #BE61A5);
}

为什么是这样显示的元素的左侧和右侧的一个奇怪的效果,有什么我可以做些什么？

这是小提琴:http://jsfiddle.net/fzndodgx/3/

是否有一个发电机,或者一个简单的方法来生成诸如文本这样,但不必定义每一封信

所以像这样:

.rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<span class="rainbow">Rainbow text</span>

但不是彩虹色而是用其他颜色生成(例如白色到灰色/浅蓝色渐变等)我找不到一个简单的解决方案.有解决方案吗

我开始使用CSS渐变而不是实际图像,原因有两个:首先,CSS渐变肯定比图像加载更快,其次,它们不应该显示条带,就像许多光栅图形一样.我最近开始在各种屏幕上测试我的网站,而在较大的屏幕上(24英寸以上),构成我网站背景的CSS线性渐变显示非常明显的条带.作为临时修复,我将渐变覆盖了一个小的,重复的,透明PNG的噪声图像,这有点帮助.有没有其他方法来解决这个条带问题？

以下代码的Opera和IE替代品是什么？

background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF));
background-image: -moz-linear-gradient(right, #0C93C0, #FFF);

请注意,我已经测试了以下规则.所有浏览器都支持它们 但它们是垂直渐变.任何人都可以帮我修改它们到横向吗？

background-image: -webkit-linear-gradient(top, #0C93C0, #FFF); 
background-image:    -moz-linear-gradient(top, #0C93C0, #FFF); 
background-image:     -ms-linear-gradient(top, #0C93C0, #FFF); 
background-image:      -o-linear-gradient(top, #0C93C0, #FFF); 
background-image:         linear-gradient(top, #0C93C0, #FFF);

我想用渐变创建一个棋盘图案.我找到了一个例子,并根据我的需要对其进行了修改,但它只适用于-moz前缀.当我删除-moz前缀时,模式完全不同.

如何使这个-moz棋盘图案无前缀地工作linear-gradient？

body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%), 
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;    
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}

我已经尝试了很多文本渐变.我找到了safari和chrome的代码,但它在其他浏览器中不兼容.我想在不使用背景图像的情况下使其工作.如果你有任何适当的解决方案,请提供.

在CSS3中有没有办法创建一个跨浏览器(即:Mozilla,Webkit和Opera)插入框阴影,它将从顶部的黑色过渡到底部的白色？我发现这样做的最接近的方式只允许阴影的外部为一种颜色,然后在内页上转换为另一种颜色:http://www.css3.info/preview/box-shadow /

如何在WinForms中创建多色线性渐变？System.Drawing.Drawing2D.LinearGradientBrush只允许两种颜色.

我的项目的创意设计师和我有一些友好的分歧,至于是否更好地使用他的comp的片段或依靠浏览器的渲染引擎来创建用户体验的某些方面.

一个具体的例子是水平"条形",它运行小部件的整个宽度.他创造了一个非常时髦的渐变,涉及不同颜色和不透明度的几个停顿,他觉得图像的小尺寸是优选的,或者至少可以与本地生成渐变所需的CSS代码的增加行相比.

我们已经在使用CSS精灵技术来减少从服务器返回的次数,这对我们来说不是问题.现在,它只是使用切片图像与使用CSS和HTML渲染的专业人士和概念.

是否存在关于图像需要多大才能成为两者"更糟糕"选项的明确规则？

更新:由于一些人已经提到梯度的复杂性作为一个因素,我将在这里介绍它:

-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));

很复杂!;-)