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

Question

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

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

Answer 1

Это невозможно, поскольку CSS не знает форму содержимого изображения (например, интерпретирует прозрачность).Вы можете сделать круг с помощью CSS3 и дать тень, см. Этот 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 2

тени не зависят от фигур в 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;
} 

Answer 3

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

ОБНОВЛЕНИЕ :

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

Answer 4

Да, просто добавьте border-radius: 50% к вашему изображению вместе со свойством box shadow :), работает в моем теге img.

Answer 5

Эта штука сработала для меня.Я хотел округлую тень вокруг изображения 32х32.

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

Существует большое руководство по теням с примерами здесь

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

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

просто отрегулируйте пиксель до желаемой округлости угла или используйте em s вместо

Answer 7

Легко, peasy!Установите border-radius: 50%; для вашего элемента изображения.

Он округляет тег изображения и его тень.

Answer 8

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

Answer 9

CSS не позволяет добавлять тени к фигурам внутри изображений. CSS не имеет ни малейшего представления, как выглядит изображение.