Question

无论如何要用渐变做一个盒子阴影吗？我走到这一步： http://jsbin.com/qelag/1（仅限webkit示例）

我想要实现的是： https://dl.dropboxusercontent.com/u/50369398/angled-box-shadow-with-gradient.PNG

那么无论如何都要以渐变的颜色制作阴影？

-Daniel

Answer 1

你可以通过分层边框来实现这一点，但如果你使用变换/背景渐变来实现它会更容易一些。这是一个可以很好地旅行的课程（我现在只为webkit设置，但你可以轻松修改）。

.container {
    width:450px;
    height:150px;
    background: grey;
    border-radius: 2px;
}

.container:after {
    display: block;
    content:"";
    width: 450px;
    height: 150px;
    position: absolute;
    z-index: -1;
    top: 150px;
    background: linear-gradient(170deg, pink, transparent 40%);
    -webkit-transform-origin: 0 0 0;
    -webkit-transform: skewX(50deg) rotateX(75deg);
}

在小提琴中： http://jsfiddle.net/jaaLx/

带有渐变css的倾斜阴影

1 个答案: