box-shadow on img w CSS

Czy jest możliwe dodanie cienia do atrybutu img w CSS, próbowałem i wydaje się, że nie działa. Mam rację czy mój kod jest tak pomieszanebox-shadow on img w CSS

CSS

.image_carousel img { 
    padding-right: 14px; 
    display: block; 
    float: left; 
    box-shadow: 3px 3px 1px #ccc; 
    -webkit-box-shadow: 3px 3px 1px #ccc; 
    -moz-box-shadow: 3px 3px 1px #ccc; 
}

HTML

<div class="image_carousel"><img src="../imgs/image.jpg" width="800" height="600" alt=""/></div>

Źródło

2011-08-03 Warface

Dlaczego szerokość i wysokość w HTML różnią się od tych w CSS? Czy na pewno cień nie jest po prostu poza ekranem? –

Kod jest prawie poprawny (M. Cypher ma rację co do rozmiaru IMG), ale jaka jest twoja przeglądarka? Twój kod powinien być obsługiwany (jeśli się nie mylę) przez IE 9+, najnowsze wersje Chrome, Opera 10.50+, Firefox 3.5+, Safari 3.1+. – VIK

wygląda można:

.image_carousel img { 
 
    margin-right: 14px; 
 
    display: block; 
 
    float: left; 
 
    box-shadow: 3px 3px 1px #ccc; 
 
    -webkit-box-shadow: 3px 3px 1px #ccc; 
 
    -moz-box-shadow: 3px 3px 1px #ccc; 
 
}

<div class="image_carousel"><img src="//placehold.it/300/f80/fff" alt=""/></div>

Źródło

2011-08-03 18:04:27

Zgodnie z specification, box-shadow dotyczy wszystkich elementów. Ale to jest spec CSS3, a więc tylko kilka przeglądarek będą ją wspierać teraz:

IE9
FF4
Opera 10.5
Safari 3
Chrome 1

to te, które przychodzą na myśl teraz

Źródło

2011-08-03 18:07:01 kaveman

img.carousel {box-shadow: 3px 3px 1px #ccc;} /*works fine 

<img src="whatever.png" class="carousel">

lub spróbować zabawy

img.carousel {border:1px solid #ccc;} 

img.carousel:hover {box-shadow: 3px 3px 10px #ccc;}

Źródło

2017-01-05 02:34:34 Kickenback61

<style> 
img { 
    -webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41); 
    -moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41); 
    box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.41); 
} 
</style> 
<img src="http://jadide.ir/wp-content/uploads/2016/06/2.jpg" alt=""/>

Źródło

2017-03-27 10:58:38

box-shadow on img w CSS

Odpowiedz

Powiązane problemy