不对称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阴影

回答

相关问题