CSS Saydam parçaları olan PNG görüntüsünde kenarlık

Question

Sahip olduğum bir PNG görüntüsüne kenarlık eklemeye çalışıyorum (Örnek dahil). İşin aslı, şu andaki sınırı eklediğimde, tam görüntüde değil, tüm görüntü etrafında bir kutu biçiminde ekler (Anlamı, görüntüdeki saydam kısımları içerir).

Saydam alanın göz önünde bulundurmayacağı sınırın yapılandırmasını ayarlamak için herhangi bir yol var mı? (? Bile değil CSS'deki ... Belki HTML5/JS)

Answer 1

bu kendim yapmak gerek genelinde geldi - bu kesmek ile geldi. Orijinalim ardında, birbiri ile biraz adım atmış bir dizi overlaid görüntü. Bağlam ctx3, orijinal görüntünün bir kopyasıdır ve bu, orijinalin birkaç kez arkasındaki beyaz silueti çoğaltır. (31 Ocak 2015) orada saf CSS ile, tuval kullanmadan bunu yapmak için bir yoludur ve kod sadece 2 satır ile Bugün itibarıyla

 ctx3.shadowColor = "rgba(255,255,255,1)"; 
     ctx3.globalCompositeOperation = 'source-over'; 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 0; 
     ctx3.shadowOffsetY = 2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 0; 
     ctx3.shadowOffsetY = -2; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = 2; 
     ctx3.shadowOffsetY = 0; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 
     ctx3.shadowOffsetX = -2; 
     ctx3.shadowOffsetY = 0; 
     ctx3.shadowBlur = 0; 
     ctx3.drawImage(YourImageSource,0,0); 

Answer 2

.

hile ( umarım) sağlayacaktır resmin etrafına sarın dair hiçbir bulanıklık, pozitif eksen için bir ve negatif diğeri, iki damla gölgeleri çizmek için css filter ve -webkit-filter özelliklerini kullanıyor

istenen etki.

Not: css filtreleri hiç IE (en Spartan iyi yapar umalım) desteklenmez, burada compatibility table olduğunu.

Bu ilk snippet (fiddle), en basit sınırını uygulayacaktır.

Gördüğünüz gibi

img { 
 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 black); 
 
    filter: drop-shadow(1px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 black); 
 
} 
 

 
body { 
 
    background-color: lightcoral; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

, bazı resimler (gibi this awesome baymax render) doğru sınır solda biraz daha küçüktür görebilirsiniz biraz daha ince ayar gerekiyor.

Bu göz önünde bulundurulduğunda, mükemmelleştirilmiş sınır snippet'i (fiddle) gerçekten çok küçük bir ayar tweak ile burada. Oldukça iyi sınırları kapsamalıdır

img { 
 
    -webkit-filter: drop-shadow(2px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 black); 
 
    filter: drop-shadow(2px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 black); 
 
} 
 

 
body { 
 
    background-color: khaki; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

, ama biz hala bu müthiş hafiflik etkisine bakmak, bu daha eğlenceli olabilir (fiddle) pasajı. Bu herkes yarı şeffaf görüntüler için bir etrafı sarılan sınırın olasılığı hakkında merak yardımcı

img{ 
 
    -webkit-filter: drop-shadow(1px 1px 0 black) 
 
        drop-shadow(-1px -1px 0 white); 
 
    filter:drop-shadow(1px 1px 0 black) 
 
      drop-shadow(-1px -1px 0 white); 
 
} 
 

 
body{ 
 
    background-color:lightblue; 
 
}

<img src="http://i.imgur.com/GZoXRjS.png" width="250">

Umut!

Answer 3

En iyi yanıtı, kullanımım için daha iyi olan biraz uzattım.

birisi hala ihtiyacı varsa

-webkit-filter: drop-shadow(2px 2px 0 white) 
 
\t \t drop-shadow(-2px 2px 0 white) 
 
\t \t drop-shadow(2px -2px 0 white) 
 
     \t \t drop-shadow(-2px -2px 0 white); 
 

 
\t filter: drop-shadow(2px 2px 0 white) 
 
\t \t drop-shadow(-2px 2px 0 white) 
 
\t \t drop-shadow(2px -2px 0 white) 
 
     \t \t drop-shadow(-2px -2px 0 white);

.