“之字形”边框的嵌入阴影

Question

我目前正在设计一个网站，对于页脚，我在顶部创建了一个“之字形”边框。 为了在网站中创建一些深度，我想在“之字形”中的三角​​形上添加阴影，这就是我目前卡住的地方。

这是我现在拥有的页脚示例：http://jsfiddle.net/CwXp4/

body {
  background: url(http://i.imgur.com/R1yaNOy.png);
}

#footer {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0;
  background-color: #333;
}

#footer:before {
  content: "";
  display: block;
  position: relative;
  top: -21px;
  height: 21px;
  background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
  background-repeat: repeat-x;
  background-size: 40px 40px, 40px 40px;
}

<div id="footer"></div>

有没有人给我一些关于如何添加阴影的提示？

Answer 1

您可以以某种方式使用与用于制作锯齿形的相同渐变来制作阴影。

CSS

#footer:before {
    content: "";
    display: block;
    position: relative;
    top: -21px;
    height: 22px;
    background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0,
                linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
    background-repeat: repeat-x;
    background-size: 40px 47px, 40px 47px;
}

body {
  background: url(http://i.imgur.com/R1yaNOy.png);
}

#footer {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0;
  background-color: #333;
}

#footer:before {
  content: "";
  display: block;
  position: relative;
  top: -21px;
  height: 22px;
  background: linear-gradient( 45deg, #333 50%, blue 50%, transparent 55%) 0 0, linear-gradient(-45deg, #333 50%, blue 50%, transparent 55%) 0 0;
  background-repeat: repeat-x;
  background-size: 40px 47px, 40px 47px;
}

<div id="footer"></div>

fiddle

您也可以使用 webkit-filter 阴影来获得阴影，但这支持有限

CSS

#footer:before {
    content: "";
    display: block;
    position: relative;
    top: -21px;
    height: 22px;
    background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0,
                linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;

    background-repeat: repeat-x;
    background-size: 40px 47px, 40px 47px;
    -webkit-filter: drop-shadow(red 0px -5px 5px);
}

body {
  background: url(http://i.imgur.com/R1yaNOy.png);
}

#footer {
  position: absolute;
  width: 100%;
  height: 200px;
  bottom: 0;
  background-color: #333;
}

#footer:before {
  content: "";
  display: block;
  position: relative;
  top: -21px;
  height: 22px;
  background: linear-gradient( 45deg, #333 50%, transparent 50%) 0 0, linear-gradient(-45deg, #333 50%, transparent 50%) 0 0;
  background-repeat: repeat-x;
  background-size: 40px 47px, 40px 47px;
  -webkit-filter: drop-shadow(red 0px -5px 5px);
}

<div id="footer"></div>

fiddle with filter