Tag: 线性渐变

使用CSS的SVG渐变

我正在尝试获取应用于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/

CSS3跨浏览器线性渐变

以下代码将会是Opera和IE的替代品吗？ background-image: -webkit-gradient(linear, right top, left bottom, from(#0C93C0), to(#FFF)); background-image: -moz-linear-gradient(right, #0C93C0, #FFF); 请注意 ，我testing了以下规则。 所有的浏览器都支持它们。 但他们是垂直渐变。 任何人都可以帮我修改他们水平的？ 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);