css - css 或 css3 中的左下角阴影效果

Question

我需要帮助来创建上图中显示的样式，这是我需要做的图形设计。上图中显示的面板左下角阴影是我真正的症结所在。我已经尝试了各种生成器，但我无法充分接近径向渐变。

如您所见，我有许多面板(实际上总共 5 个)并排排列，每个面板的宽度可能不同，并且会随着浏览器 View 端口的大小调整而调整大小，因此提供背景图像并不是真正的选项。

我有一个重复的透明背景图像，可以创建效果很好的纹理效果，所以我不关心纹理效果，但我完全无法创建左下角较暗的阴影效果，我需要尽可能接近可能使用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

我非常接近使用这个工具 http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html

给了我

/* 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%);

非常感谢所有帮助

Answer 1

我建议将纹理图像放在列的容器 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>

如果您需要调整线条的位置，只需使用 background-position。这将允许您的列尽可能宽，而无需为每个列更改图像。