как установить тень для круглого изображения (css)

Question

Я новичок в тени в css, мы можем установить тени для круглое изображение (я имею в виду изображение круга).

если возможно, дайте мне код для этого в css. заранее спасибо

Answer 1

Шаблоны CSS3 теней применяются к элементу, а не к элементу. Другими словами, если у вас есть изображение (прямоугольное), но само изображение имеет круг, тень будет применена к элементу прямоугольного изображения, а не к фактическому объекту изображения.

UPDATE:

Конечно, вы всегда можете использовать элемент холста, чтобы играть с тенями. Вот jsFiddle example как для рисования круга, так и для загрузки круга, а затем применения эффекта тени для обоих.

Answer 2

Там будет большой учебник для коробки-слежка с примерами here

Кроме того, простые CSS3 для скругления углов в поперечном браузере

border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 

просто настроить пикс в углу округлости вы хотите , или использовать em s вместо

Answer 3

CSS не позволяет добавлять тени к фигурам ВНУТРЕННИЕ изображения. CSS не знает, как выглядит изображение.

Answer 4

В css3 есть свойство, выполняющее именно то, что вы хотите. Но, конечно, это еще не реализовано все браузеры (IE ...) Посмотрите там: http://css-tricks.com/snippets/css/css-box-shadow/

Answer 5

Это невозможно, так как CSS не знает формы содержания изображения (например, интерпретировать прозрачность). Вы можете сделать круг с CSS3 и дать тень, see this jsFiddle.

div { 
    background: red; 
    height: 100px; 
    width: 100px; 
    border-radius: 50px; 
    margin: 20px; 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 1); 
} 

Answer 6

Эта вещь работала для меня. Мне понадобилась закругленная тень вокруг изображения 32x32.

<a class="media-links" href=""> 
    <img class="media-imgs" src=""> 
</a> 

CSS такой.

 img.media-imgs 
     { 
      -webkit-border-radius: 20px; 
     } 

     img.media-imgs:hover 
     { 
       -webkit-animation-name: greenPulse; 
       -webkit-animation-duration: 2s; 
       -webkit-animation-iteration-count: 1; 
       -webkit-box-shadow: 0 0 18px #91bd09; 
     } 

Answer 7

Да, просто добавьте границы радиуса: 50% к изображению наряду с теневой собственностью коробки :) работает в моем IMG тега.

Answer 8

тени не зависят от фигур в css, вы можете использовать свойство shadow для круга после создания круга. Вы можете использовать следующий код для этого, он должен работать нормально

.circle{ 
    width:150px;height:150px; 
    border: solid 1px #555; 
    background-color: #eed; 
    box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -moz-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -o-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    border-radius:100px; 
}