comment définir l'ombre pour l'image ronde (css)

Je suis nouveau à l'ombre, en css peut-on définir des ombres
image ronde(je veux dire, à un cercle d'image).

si c'est possible, merci de me donner un code dans le css.
merci d'avance

source d'informationauteur FreshBits

  1. 4

    CSS3 box ombres appliquer des ombres à l'élément, et non le contenu de l'élément. En d'autres termes, si vous avez une image (qui est rectangulaire), mais l'image elle-même est d'un cercle, l'ombre sera appliqué à l'image rectangulaire élément, et non le sujet de l'image.

    Mise à JOUR:

    Bien sûr, vous pouvez toujours utiliser l'élément canvas pour jouer avec les ombres. Voici un jsFiddle exemple à la fois de dessiner un cercle et le chargement d'un cercle, puis d'appliquer un effet d'ombre à la fois.

  2. 13

    C'est impossible car le CSS ne sais pas la forme du contenu de l'image (par exemple, interpréter la transparence).
    Vous pourriez faire un cercle avec CSS3 et donner une ombre, voir ce 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);
}
  3. 4

    ombres sont indépendants de formes dans le css, vous pouvez utiliser l'ombre de la propriété de cercle après la création du cercle.
    Vous pouvez utiliser le code suivant pour cela, il devrait fonctionner correctement

    .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;
}
  4. 2

    Il est bon tutoriel pour la zone d'observation avec des exemples ici

    Aussi, simple css3 pour arrondir les coins de la croix-navigateur 

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

    il suffit de régler le pix à l'arrondi que vous voulez, ou utiliser ems au lieu

  5. 2

    Cette chose qui a fonctionné pour moi. Je voulais un arrondi de l'ombre autour de l'image de 32x32. 

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

    CSS, c'est comme cela.

            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;
        }
  6. 0

    CSS ne vous permet pas d'ajouter des ombres de formes à l'INTÉRIEUR des images. CSS n'a aucune idée de ce que l'image ressemble.

  7. 0

    Il est une propriété css3 faire exactement ce que vous whant. Mais, bien sûr, ce n'est pas encore mis en œuvre par tous les navigateurs (IE...)
    Jeter un coup d'oeil : http://css-tricks.com/snippets/css/css-box-shadow/

  8. 0

    Oui, il suffit d'ajouter un border-radius: 50% à votre image avec la zone d'ombre de la propriété 🙂 dans ma balise img.