帶有漸變css的角度下拉陰影

Question

無論如何要用漸變做陰影嗎？我已經走到這一步： http://jsbin.com/qelag/1（例如WebKit的只有ATM）

我想實現的是： 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/