自由形式（正方形以外）のPNG画像があります。
この画像にドロップシャドウ効果を適用する必要があります。
標準的なアプローチ...
-o-box-shadow: 12px 12px 29px #555;
-icab-box-shadow: 12px 12px 29px #555;
-khtml-box-shadow: 12px 12px 29px #555;
-moz-box-shadow: 12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow: 12px 12px 29px #555;...正方形のように、この画像の影を表示します。だから、私は自分の画像と正方形の影を見ることができますが、それは画像に表示されているオブジェクトの形には従いません。
それを正しく行う方法はありますか？
回答:
パーティーには少し遅れますが、はい、IE用のdropshadow-filter（Webkit用）、SVG（Firefox用）、およびDXフィルターの組み合わせを使用して、アルファマスクされたPNGの周囲に「真の」動的ドロップシャドウを作成することは完全に可能です。
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}<!-- HTML elements here -->
<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
<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>真のドロップシャドウとボックスシャドウの比較と、今説明したテクニックに関する記事。
これが役に立てば幸いです！
filter: drop-shadow(x y blur color);ため、SVGトリックは必要ありません。
はい、filter: dropShadow(x y blur? spread? color?)CSSまたはインラインでを使用して可能です。
img {
width: 150px;
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png">
<img src="https://cdn.freebiesupply.com/logos/large/2x/stackoverflow-com-logo-png-transparent.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222); filter: drop-shadow(5px 5px 5px #222);">ドロップシャドウを適用したい100を超える画像がある場合は、コマンドラインプログラムImageMagickを使用することをお勧めします。これにより、1つのコマンドを入力するだけで、シェイプされたドロップシャドウを100枚の画像に適用できます。例えば：
for i in "*.png"; do convert $i '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage "shadow/$i"; done上記の（シェル）コマンドは、現在のディレクトリ内の各.pngファイルを取得し、ドロップシャドウを適用して、結果をshadow /ディレクトリに保存します。生成されるドロップシャドウが気に入らない場合は、パラメーターを何度も調整できます。まず、影のドキュメントを見てください。一般的な使用方法の説明には、画像に対して実行できる優れた例が多数含まれています。
ドロップシャドウの外観について将来気が変わった場合-異なるパラメーターで新しい画像を生成するコマンドは1つだけです:-)
mkdir shadow）シャドウディレクトリを作成する必要があります。2.の$iように引用符で囲む必要が"$i"あります。for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i".png; done
filename.png.png。ここで完全に動作するバージョンがあります：for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i"; done
ダドリーが彼の回答で述べたように、これは、webkitのドロップシャドウCSSフィルター、FirefoxのSVG、およびInternet Explorer 9のDirectXフィルターで可能です。
さらに1つのステップは、SVGをインライン化して、余分な要求を排除することです。
.shadowed {
-webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
filter: url("data:image/svg+xml;utf8,<svg height='0' xmlns='http://www.w3.org/2000/svg'><filter id='drop-shadow'><feGaussianBlur in='SourceAlpha' stdDeviation='4'/><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>#drop-shadow");
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}これがグローホバーアニメーションのコードスニペットです。
http://codepen.io/widhi_allan/pen/ltaCq
-webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,0.80));私が最初にこれを投稿したとき、それは不可能でしたので、これが回避策です。今、私は単に他の答えを使用することをお勧めします。
画像の輪郭を正確に取得する方法はありませんが、中央の画像の背後にあるdivでそれを偽造できます。
私のトリックがうまくいかない場合は、画像を切り取って、小さな画像のすべてに対して行う必要があります。（画像が多いほど影はより正確になります）しかし、ほとんどの画像では、1つのimgで問題なく見えます。
あなたがする必要があるのはそのようにあなたのimgの周りにラップdivを置くことです
<div id="imgWrap">
<img id="img" scr="imgLocation">
</div>次に、ラップの内側に空の仕切りを入れます（これは影として機能します）
<div id="imgWrap">
<div id="shadow"> </div>
<img id="img" scr="imgLocation">
</div>そして、あなたはCSSでimgの後ろに影を表示させる必要があります：
#img {
z-index: 1;
}
#shadow {
z-index: 0; /*make this value negative if doesnt work*/
box-shadow: 0 -130px 180px 150px rgba(255, 255, 0, 0.6);
width: 0;
height: 0;
}ここでimgWrapを配置して元のimgを配置します... imgのシャドウを中央に配置して、ボックスシャドウの最初の2つの値をいじってネガティブにすることができます...またはimgとシャドウdivを絶対的に配置できますimgの上部と左側の値を0にし、シャドウのdiv値をそれぞれimgの幅と高さの半分にします。
これが恐ろしいと思われる場合は、imgを切り取って、再試行してください。
（アウトラインのimgの背後にある影が不要な場合は、imgを不透明にし、透明であるかのように動作させる必要があります。これはそれほど難しくありません。コメントできます。後で説明します）
私の場合は、さまざまな形と透明度のPNG画像を備えた最新のモバイルブラウザーで動作する必要がありました。画像の複製を使用してドロップシャドウを作成しました。つまりimg、同じ画像の2つの要素がposition: absolute重なり合っており（を使用）、後ろの要素には次のルールが適用されています。
.image-shadow {
filter: blur(10px) brightness(-100);
-webkit-filter: blur(10px) brightness(-100);
opacity: .5;
}これには、下部の画像を暗くするための明るさフィルターと、ドロップシャドウが通常持っているぼやけた効果をキャストするためのぼかしフィルターが含まれます。次に、50％の不透明度を適用して柔らかくします。
これはmoz、msフラグを使用してブラウザ間で適用できます。
任意の形状のドロップシャドウに使用できる機能が提案されています。Lea Verouの厚意により、こちらでご覧いただけます。
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
ただし、ブラウザのサポートは最小限です。
これはcssでは不可能です。画像は正方形なので、影は正方形の影になります。最も簡単な方法は、photoshop / gimpまたはその他の画像エディターを使用して、コアドローのような影を適用することです。
「少し」の影が必要なときによく使用するトリック（読み取り：輪郭は超精密であってはなりません）は、画像の下に100％黒から100％透明の放射状の塗りつぶしのDIVを配置することです。DIVのCSSは次のようになります。
.shadow320x320{
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%, rgba(0,0,0,0.58) 1%, rgba(0,0,0,0) 43%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.58)), color-stop(1%,rgba(0,0,0,0.58)), color-stop(43%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0.58) 0%,rgba(0,0,0,0.58) 1%,rgba(0,0,0,0) 43%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}これにより、320x320 DIVに円形の黒いフェードアウト「ドット」が作成されます。DIVの高さまたは幅をスケーリングすると、対応する楕円が得られます。ボトルの下に影や他の円筒のような形を作るのにとても良いです。
ここにCSSグラデーションを作成するための絶対に信じられないほど優れたツールがあります：
http://www.colorzilla.com/gradient-editor/
ps：使用するときに礼儀広告クリックをしてください。（そして、いいえ、私はそれとは関係ありません。しかし、礼儀正しくクリックすることは、特に頻繁に使用するツールの場合は少し癖になるはずです...ただ言う...私たちはすべてネットで作業しているので... ）
すべてのブラウザでこれを確実に行うことはできません。MicrosoftはIE10以降、DXフィルターをサポートしなくなったため、ここでのソリューションは完全に機能しません。
https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
すべてのブラウザで確実に機能する唯一のプロパティはbox-shadowであり、これは要素（divなど）にボーダーを配置するだけで、四角いボーダーになります。
box-shadow：horizontalOffset verticalOffset blurDistance spreadDistanceカラーインセット。
例えば
box-shadow: -2px 6px 12px 6px #CCCED0;「正方形」であるが、丸い角が均一な画像がある場合、ドロップシャドウはで機能するborder-radiusため、divで画像の丸い角を常にエミュレートできます。
以下は、Microsoftのドキュメントですbox-shadow。
https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx
多分あなたはこれを探しています。 http://lineandpixel.com/blog/png-shadow
img { png-shadow: 5px 5px 5px #222; }
filterますが、クロスプラットフォームのCSS プロパティに対して+1します。ただし、HTML SVGタグは必要ないと思いますが、アルファチャネルを含むPNGで