css或css3中的左下角着色效果

我需要帮助创建上面的图像中显示的样式，这是我需要做的图形设计。上图所示面板的左下角阴影是我真正的症结所在。 我试过各种各样的发电机，但我就是无法接近径向梯度

正如您所看到的，我有许多面板（实际上总共5个）排列在一起，每个面板可能具有不同的宽度，并且将根据borwser视图端口大小调整大小，因此提供背景图像并不是一个真正的选项

我有一个重复的透明背景图像，可以创建纹理效果，效果很好，所以我不关心纹理效果，但我完全无法创建左下角较暗的着色效果，我需要使用css尽可能接近。这几天来，我一直在为此事焦头烂额

主绿色十六进制代码为#3F4B0B

我的css目前看起来像这样

@mixin forest-green-texture{
    @include background-image(url("texture.png"), linear_gradient($dark-green, $light-green));
}
.footer-box{
    @include banner-color;
    @include forest-green-texture();
    width:18%;
    float:left;
}

线性梯度根本不能解决这个问题！这是我最后一次尝试，完全错误

我正在使用SASS，如果这有区别的话

我用这个工具接近了

这给了我

/* IE10 Consumer Preview */  background-image:
-ms-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);

/* Mozilla Firefox */  background-image: -moz-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%,
#000000 100%);

/* Opera */  background-image: -o-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);

/* Webkit (Safari/Chrome 10) */  background-image:
-webkit-gradient(radial, right top, 0, right top, 970, color-stop(0, #3F4B0B), color-stop(0.7, #3F4B0B), color-stop(0.9, #3F4B0B), color-stop(1, #000000));

/* Webkit (Chrome 11+) */  background-image:
-webkit-radial-gradient(right top, circle farthest-side, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);

/* W3C Markup, IE10 Release Preview */  background-image: radial-gradient(circle farthest-side at right top, #3F4B0B 0%, #3F4B0B 70%, #3F4B0B 90%, #000000 100%);

我知道颜色有点不对劲，我不担心我可以调整它们，但上面的颜色并没有比线性渐变好多少

更新 这是我迄今为止成功实现的一个屏幕截图

正如你所看到的，阴影是不正确的。 我用的css是

background-image: url("texture.png"), linear-gradient(to right top, black 0%, rgb(70, 84, 12) 50%, rgb(82, 97, 14) 100%);

---

非常感谢所有帮助

我建议将纹理图像放在列的容器div的背景上，然后对每列使用具有透明背景的线阴影图像作为每列的背景属性

<style>

  .container {
    background: url(textureImg.png) repeat;
  }

  div[class^="col"] {
    background: url(lineShadowImg.png) no-repeat;
  }

</style>

<div class='container'>

  <div class='colOne'>
    //your content
  </div>

  <div class='colTwo'>
    //your content
  </div>

  <div class='colThree'>
    //your content
  </div>

</div>

.集装箱{
背景：url（textureImg.png）重复；
}
div[class^=“col”]{
背景：url（lineShadowImg.png）不重复；
}
//你的内容
//你的内容
//你的内容

---

如果需要调整线条的位置，只需使用背景位置。这将允许您的列具有所需的宽度，而无需更改每个列的图像。

我建议将纹理图像放置在列的容器div的背景上，然后为每个列使用具有透明背景的线阴影图像作为每个列的背景属性

<style>

  .container {
    background: url(textureImg.png) repeat;
  }

  div[class^="col"] {
    background: url(lineShadowImg.png) no-repeat;
  }

</style>

<div class='container'>

  <div class='colOne'>
    //your content
  </div>

  <div class='colTwo'>
    //your content
  </div>

  <div class='colThree'>
    //your content
  </div>

</div>

.集装箱{
背景：url（textureImg.png）重复；
}
div[class^=“col”]{
背景：url（lineShadowImg.png）不重复；
}
//你的内容
//你的内容
//你的内容

---

如果需要调整线条的位置，只需使用背景位置。这将允许您的列具有所需的宽度，而无需更改每个列的图像。

对不起，您的意思是希望渐变看起来像示例图片吗？或者这张图片是你现在拥有的东西的一个例证，但是你想改进它吗？@MrLister我需要渐变看起来像示例图片吗？你是说你想让渐变看起来像示例图片吗？或者这张图片是你现在所拥有的东西的一个例证，但你想改进它吗？@MrLister我需要梯度看起来像示例图片