我们可以给一个自定义css3形状的阴影

Question

我试图给一个梯形的css3形状的阴影， 我给它的盒子阴影，但这是一个盒子的表演 我想将阴影添加到形状的边缘。

border-top: 100px solid rgba(255, 255, 255, 0.3); 
border-left: 60px solid transparent; 
border-right: 60px solid transparent; 

Answer 1

随着该CSS

body { 
    background: linear-gradient(90deg, lightblue, yellow) 
} 

.trapezoid { 
    left: 87px; 
    top: 50px; 
    position: absolute; 
    height: 100px; 
    width: 500px; 
} 

.trapezoid:before, .trapezoid:after { 
    content: ''; 
    position: absolute; 
    width: 65%; 
    height: 100%; 
    border-color: red; 
    border-style: solid; 
    border-radius: 10px; 
    background-color: lightblue; 
    box-shadow: 4px 4px 6px black; 
    z-index: -1; 
    -webkit-animation: shadow 2s infinite; 
} 
.trapezoid:before { 
    left: -7%; 
    border-width: 3px 0px 3px 3px; 
    -webkit-transform: skewX(-20deg); 
} 

.trapezoid:after { 
    right: 0px; 
    border-width: 3px 3px 3px 0px; 
    -webkit-transform: skewX(20deg); 
    clip: rect(-40px, 450px, 220px, 30px); 
} 

@-webkit-keyframes shadow { 
     0% { box-shadow: 10px 10px 4px black;} 
    25% { box-shadow: -10px 10px 4px black;} 
    50% { box-shadow: -10px -10px 4px black;} 
    75% { box-shadow: 10px -10px 4px black;} 
    100% { box-shadow: 10px 10px 4px black;} 
} 

you get this

作为奖励，动画WebKit的。

（阴影是不完美的，特别是如果你给它模糊了，但你可以只用CSS获得）

Answer 2

不，你不能给一个影子了双方4比（比一箱以外的任何其他）

它被称为BOX-阴影出于这个原因。

请记住，它也意味着只有水平和垂直...任何对角线都不起作用。 2个侧面水平，2面垂直

Answer 3

如果你想添加阴影完全不规则的形状，而不只是扭曲的矩形，那么你可以使用CSS3滤波器掉话阴影

.shadow 
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); 
    -moz-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); 
    filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); 
} 

这具有产生一个阴影是相同的形状，你源对象的（不规则边缘，凹口和伸出位包括在内）的效果

你也可以使用一个SVG图像pply阴影，并且在样式

<svg height="0" xmlns="http://www.w3.org/2000/svg"> 
    <filter id="drop-shadow"> 
    <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/> 
    <feOffset dx="12" dy="12" result="offsetblur"/> 
    <feFlood flood-color="rgba(0,0,0,0.5)"/> 
    <feComposite in2="offsetblur" operator="in"/> 
    <feMerge> 
     <feMergeNode/> 
     <feMergeNode in="SourceGraphic"/> 
    </feMerge> 
    </filter> 
</svg> 

如

.shadow { 
    url(shadow.svg#drop-shadow); 
} 

一个complete comparison详细介绍了使用这种这些技术的ANS以及展示他们使用的许多有趣的例子。

即使IE浏览器有一个过滤器，以帮助做到这一点（不那么好，如上图所示的方式）

.shadow { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')"; 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')"; 
}