在CSS中的img框陰影

是否有可能在CSS中的img屬性添加陰影，我試過了，它似乎不工作。我是正確或我的代碼只是搞砸在CSS中的img框陰影

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>

來源

2011-08-03 Warface

爲什麼在HTML寬度和高度，從那些在CSS有什麼不同？你確定這個影子不只是在屏幕外？ –

代碼幾乎是正確的（M. Cypher對於img大小是正確的），但是什麼是瀏覽器？您的代碼應該受IE 9+，最新版Chrome，Opera 10.50+，Firefox 3.5+，Safari 3.1+的支持（如果我沒有弄錯的話）。 – VIK

貌似可以：

.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>

來源

2011-08-03 18:04:27

根據specification,box-shadow適用於所有元素。但是，這是CSS3規範，所以只有瀏覽器的少數會支持它現在：

IE9
FF4
歌劇院10.5
的Safari 3
鉻1

是現在想起的那些

來源

2011-08-03 18:07:01 kaveman

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

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

或嘗試的樂趣

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

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

來源

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=""/>

來源

2017-03-27 10:58:38

在CSS中的img框陰影

回答

相關問題