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

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

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

可以在绝对定位的伪元素上使用渐变来模拟,使用z-index使其出现在其父元素下面.

DEMO

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及更早版本中无效.您可以使用过滤器渐变,但不能使用伪元素,因此在这种情况下您需要做的是将子项添加到元素(仅适用于IE)并将其设置为样式,就像设置伪元素一样.

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

DEMO #2

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