我們可以給一個自定義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')"; 
}