Question

我正在试图弄清楚这是否可以用css。我想要一个有阴影的方块。在广场的底部，投影完全可见。在广场的顶部，没有明显的阴影。这将是一个渐变，因此位于顶部和底部之间，投影将是一半可见。

关于如何实现这一目标的任何想法？

Answer 1

可以模拟在绝对定位的伪元素上使用渐变，使用z-index使其显示在其父元素下面。

HTML：

<div class='e'></div>

CSS：

.e {
    position: relative;
    width: 10em;
    height: 10em;
    margin: 1em;
    background: lemonchiffon;
}
.e:before {
    position: absolute;
    z-index: -1;
    top: 10%; left: 10%;
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent, navy);
    content: '';
}

如果你想要阴影有一个褪色的边缘，那么你必须给这个伪元素一个插入阴影（与.e的父背景颜色相同）。

box-shadow: inset 0 0 .5em .5em white;

请注意，这在IE9及更早版本中无效。您可以使用filter渐变，但不是伪元素，因此在这种情况下您需要做的是将元素添加到元素中（仅适用于IE）并且它就像你为伪元素设置风格一样。

编辑：如果你想让它在图像，渐变背景上工作，那么我担心它有点棘手，而且只能在IE9和旧版本中使用CSS来完成。但是，在其他浏览器的当前版本中，可以使用线性渐变和三个径向渐变来实现。

相关CSS：

.e {
    width: 25em; /* give it whatever width and height you like */
    height: 25em;
    /* make padding on right and bottom larger by adding the amount taken by
     * the "shadow"
     */
    padding: 5% 10% 10% 5%;
    box-sizing: border-box;
    /* change navy to red in each of these at one time to see what each
     * gradient covers
     */
    background:radial-gradient(at top right, navy, transparent 70.71%) 0 100%,
        radial-gradient(at top left, navy, transparent 70.71%) 100% 100%,
        radial-gradient(at bottom left, navy, transparent 70.71%) 100% 0,
        linear-gradient(navy, transparent) 50% 100%;
    background-repeat: no-repeat;
    background-size: 95% 95%, 5%, 5%, 5% 95%, 90% 5%;
}

Answer 2

我只需要为我的一个开发人员嘲笑这个......也许对某人有用：

密码笔
http://codepen.io/anon/pen/aOpOMV

HTML

<div class="element">
  <div class="inner">
    lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah lorem ipsum blahblah 
  </div>
</div>

CSS

.element {
  width:500px; min-height:500px; box-shadow:0 0 8px 0 rgba(0,0,0,.4); margin:0 auto; position:relative;
}
.element:before {
  position:absolute; bottom:0; width:100%; height:80%; content:''; background: linear-gradient(transparent 0%,#fff 100%);transform:scale(1.2);
}
.inner {
  position:relative; z-index:2; padding:20px;
}

注意：不需要宽度/高度..只是用于模拟

Answer 3

CSS3的box-shadow属性只接受<color>值，而不像图像或CSS渐变那样复杂，但我可以想到一些方法来破解它。

第一个是使用渐变背景的父元素然后应用内部阴影（其中内部阴影与页面背景颜色相同，假设您可以使用纯色）。然后你把你的实际盒子放在里面。

另一种方法是使用CSS3图像边框（使用stretch而不是平铺）。您可以将阴影概括为CSS图像边框的特定情况，因此只需在Photoshop中创建自己的渐变图像并将其设置为边框。

最后，唯一的另一个选择是CSS2风格的包装元素和预定义图像。我认为这不再是必要了，因为现在没有人关心IE6和7。

Answer 4

如果我理解正确，你需要这样的东西：

box-shadow: black 0 -60px 50px -50px inset

最终值（-50像素）将阴影向后剪切50px。然后第二个值（-60px）沿垂直方向取消，沿底部取消，并向底部阴影添加10px。第三个值是点差，这就是我决定在第四个值中剪切阴影的程度。

但是你使用盒子阴影很难做到这一点。除非你知道元素的高度，否则绝对不能覆盖一半的盒子。最好只使用带有CSS3渐变的background-image属性。有关详细信息，请查看此链接：http://www.impressivewebs.com/css3-linear-gradient-syntax/

编辑 OH我想明白你的意思。你真的想要一个投影，而不是一个插入阴影，但你希望它看起来像一个渐变。大卫的答案更适用。我无法添加注释，但你可以使用：before和/或：after伪元素作为他的第一个选项。

是否可以将阴影作为渐变？

4 个答案: