box-shadow на img в CSS - PullRequest
       1

box-shadow на img в CSS

8 голосов
/ 03 августа 2011

Можно ли добавить тень к атрибуту img в 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>

Ответы [ 4 ]

10 голосов
/ 03 августа 2011

выглядит так, как вы можете:

.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>
0 голосов
/ 27 марта 2017
<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=""/>
0 голосов
/ 05 января 2017
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;} 
0 голосов
/ 03 августа 2011

В соответствии со спецификацией , box-shadow применяется ко всем элементам.Но это спецификация CSS3, поэтому пока ее поддерживают только несколько браузеров:

  • IE9
  • FF4
  • Opera 10.5
  • Safari 3
  • Chrome 1

- вот те, которые приходят на ум сейчас

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...