标签: css-gradients

这就是我想要实现的目标：

浅蓝色线只是标记。我想要一个距离中心固定像素（向左）的角度。我还希望左侧的深蓝色也成为渐变。

我可以制作我需要的角度，但我坚持将其放置在距离中心的固定点上，并使较暗的部分成为另一个有角度的渐变：

.topbar {
  height: 150px;
  background: rgb(28,25,84);
  background: linear-gradient(-63deg, rgba(28,25,84,1) 50%, rgba(20,18,63,1) 0);
}

<div class="topbar"></div>

谢谢！

我想使用选项字段更改折线图的网格颜色,但我不知道从哪里开始.我首先尝试使用渐变来更改画布背景颜色,但结果并不好.

canvas{
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%);
}

但是,我没有得到我想要的东西,因为正如你在上面的图片中看到的那样,不仅网格被着色而且x值,y标签和图表图例也被着色.

我用这个css代码得到的结果的图片

我想要的例子

我的chart.js选项是

options = {
        scales: {
          xAxes: [{
            gridLines: {
              color: 'rgba(171,171,171,1)',
              lineWidth: 1
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              max: 100,
              min: 0,
              stepSize: 10
            },
            gridLines: {
              color: 'rgba(171,171,171,1)',
              lineWidth: 0.5
            }
          }]
        },
        responsive: true
      };

那么,有没有办法将网格的背景设置为3种不同的颜色(渐变与否)？注意:我正在使用带有角度2的图表.(ng2-charts)

我有一个问题，我想创建一个 CSS 循环渐变动画，但是当我这样做时，动画是非常静态的，它不能流畅地动画 下面是我目前正在处理的示例。希望你能帮助我。

.slider1 {
  background: background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(109, 0, 255)) !important;
}

/* css animation not smooth */
.slider1 {
  opacity: .5;
  animation: myfirst 5s;
  -moz-animation: myfirst 5s infinite; /* Firefox */
  -webkit-animation: myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst { /* Firefox */ 
  0% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(0, 174, 255))
  }
  50% {
    background: linear-gradient(rgba(173, 136, 255, 0.44), rgb(135, 255, 0))
  }
  100% {
    background: linear-gradient(rgba(173, 136, …

我正在尝试使用 CSS 将三种纯色的外部渐变边框（图 B）添加到图像（图 A），但到目前为止我尝试过的方法并没有太多运气。图像将具有 border-radius: 50% 以使它们成为圆形，并且外边框需要随图像缩放。我希望能够仅使用 CSS 类快速将其应用于任何图像。

我尝试过 SVG 蒙版、边框图像和常规叠加，但似乎都无法完成手头的任务。 这支笔是我得到的最接近的，但是我需要图像和边框之间的空白。

.img-circle{
  border-radius: 50%;
} 
.border {
  margin: 25px 0;
  /*padding: 1em;*/
  border: 12px solid transparent;
  background-size: 100% 100%, 60% 60%, 40% 40%, 25% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white),
    linear-gradient(30deg, teal 36%, teal 30%),
    linear-gradient(120deg, gold 36%, gold 30%),
    linear-gradient(210deg, blue 36%, blue 30%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box;
  background-clip: …

我需要制作如下的多个渐变:

现在看看灰色/白色渐变的中心是如何不同的,在某些情况下,它来自中心,一些来自左中心,一些来自中心 - 底部.

我使用THIS,工具生成以下渐变:

background: #f9f9f9;
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%);
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
background: radial-gradient(ellipse at center, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#d1d6db',GradientType=1 ); 

FIDDLE HERE,现在可以制作渐变像我在上图中所示,或者我是否必须使用图像？

我在我正在构建的新网站上使用径向渐变，但颜色在桌面上的 Safari 中呈现不同（更暗）。有没有更好的跨浏览器语法可供使用？

我尝试了不同的前缀，但这并没有解决问题。我正在使用的代码如下。

.item1 {
  background: -webkit-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -webkit-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: -o-radial-gradient( bottom left, farthest-side, rgba(218, 218, 216, 0.5), transparent), -o-radial-gradient( bottom right, farthest-corner, rgba(253, 253, 253, 0.5), transparent 300px);
  background: radial-gradient( farthest-side at bottom left, rgba(218, 218, 216, 0.5), transparent), radial-gradient( farthest-corner at bottom right, rgba(253, 253, 253, 0.5), transparent 300px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

当前在 Chrome 和 Firefox 中看到的正确输出： https: …

我想这样写一个锁子甲：

我已经尝试过使用线性渐变，但是似乎不起作用

    background: linear-gradient(#0c0c0c, #222222)!important

我希望输出像imgur所示的图像一样。线性渐变会起作用吗？

设计师想出了这种类型的背景，如下图所示。我想避免使用图像背景。所以我想弄清楚是否可以使用 CSS 背景属性复制它。

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

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

我正在尝试使用此代码在背景图像上放置渐变

background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225);
background-size: cover;

我正在获取图像，但没有应用渐变