Próbuję stworzyć wytłoczony efekt na obrazie (jak polaroid). więc na wierzchu powinien znajdować się cień skrzynkowy i lewa krawędź włożona w obrazek. Ale to nie działa ... jest to problem z przeglądarką:BoxShadow: inset on img tag
Stworzyłem jsfiddle http://jsfiddle.net/PEgBv/25/, aby pokazać, co chcę.
Podoba mi się na drugim polu div (gdzie działa). Ale na obrazach cień jest wyświetlany tylko bez atrybutu inset.
Praca z chrome14 na linux
cienie CSS3 wpuszczanym nie działają na zdjęciach, ale istnieje obejście,
Sprawdź tutaj: http://bavotasan.com/2011/adding-inset-shadow-to-image-css3/
Rozwiązaniem nie pracuj dla obrazów o numerach max-width: 100%; i height: auto;, które są często używane w projektach płynów, aby obrazy skalowały się automatycznie, aż osiągną oryginalną szerokość. Aby rozszerzyć otoczenie (lub jakikolwiek element) rozwiń, aby pokryć całą zawartość (obraz), musisz dodać wyświetlacz: wbudowany blok; do tego, w przeciwnym razie cień nie będzie wyświetlany zgodnie z oczekiwaniami.
Tak więc, oprócz stylów w proponowanym obejściu, należy dodać display: inline-block; do klasy .img-shadow.
Będzie działać, jeśli użyjesz obrazu na tle. Zamiast tagu img użyj background-image: url(source.jpg); w pliku css lub atrybucie stylu. Box-shadow jest renderowany na wierzchu obrazu tła.
właśnie wypróbowany na win7 z ie9, ff6, chrome14 i safari ... również nie działa! – itshorty
Nie wiem, czy mógłbym to nazwać problemem przeglądarki. Obrazy są renderowane tylko na cieniu, więc nie pojawiają się. Możesz [powiedzieć, czy używasz przezroczystych obrazów] (http://jsfiddle.net/LJcWE/) – OverZealous
Jeśli przyjrzysz się dokładnie przykładowi, zobaczysz, że tekst 'foo' jest również wyświetlany na wierzchu. – OverZealous