锯齿形的插入阴影边界 [英] inset shadow for "zigzag" border

问题描述

我目前正在设计一个网站，对于页脚，我在顶部创建了一个之字形"边框.为了增加网站的深度，我想在锯齿形"中的三角​​形上添加阴影，这就是我目前遇到的问题.

I'm currently designing a website, and for the footer I've created a "zigzag" border on top. To create some depth in the website, I wanted to add a drop shadow on the triangles in the "zigzag", and this is where I'm currently stuck.

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

Here is an example of the footer as I have it right now: 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>

是否有人在外面给我一些有关如何添加投影的提示?

Is there someone out there with some tips for me on how to add a drop shadow?

推荐答案

您可以通过某种方式以与制作锯齿形相同的渐变来制作阴影.

You can somehow make the shadow with the same gradients that you are using to make the zigzag.

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>

小提琴

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

You could also get the shadow with a webkit-filter shadow, but this has limited support

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>

带过滤器的小提琴

这篇关于锯齿形的插入阴影边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！