css - 投影可以是渐变吗？

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%;
}