不對稱CSS陰影

有沒有一種方法來創建一個影子像這樣：不對稱CSS陰影

enter image description here

我要的是影子比底部，左/右大底部中心。

2013-07-29 user2013488

你絕對可以，使用僞元素:before和:after實現它：（working jsFiddle）

.effect{ 
    position:relative; 
} 

.effect:before, .effect:after{ 
    content:""; 
    position:absolute; 
    z-index:-1; 
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8); 
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8); 
    box-shadow:0 0 20px rgba(0,0,0,0.8); 
    top:50%; 
    bottom:0; 
    left:10px; /* distance from left inwards */ 
    right:10px; /* distance from right inwards */ 
    -moz-border-radius:100px/10px; 
    border-radius:100px/10px; 
}

來源

2013-07-29 23:21:17

謝謝，但現在它已經是描盒子的左側和右側，我不想那樣。只在底部。（http://jsfiddle.net/4GZCw/）你知道如何解決這個問題嗎？ – user2013488

我已將[此jsFiddle]（http://jsfiddle.net/4GZCw/1/）添加到我的答案中 - 查看僞元素的「left」和「right」。讓他們變得更大..你可以和他們一起玩，以獲得你想要的完美。你也可以減少'box-shadow'的'20px' –

謝謝，它非常完美。 – user2013488

http://jsfiddle.net/PtbNb/1/

<div class="box"></div> 

.box { 
    -webkit-box-shadow: -10px 32px 24px -28px rgba(0, 0, 0, 1); 
    -moz-box-shadow: -10px 32px 24px -28px rgba(0, 0, 0, 1); 
    box-shadow: -10px 32px 24px -28px rgba(0, 0, 0, 1); 
    height:250px; 
    width:250px; 
    background:grey; 
}

發電機：http://www.cssmatic.com/box-shadow

來源

2013-07-29 23:29:32

不對稱CSS陰影

回答

相關問題