Comment ajouter un effet de fondu à la frontière comme de l'image ci-jointe

Je suis en train de réaliser un div comme ceci. J'ai le bleu de l'arrière-plan et la couleur de premier plan. Mais je ne suis pas sûr de la façon d'obtenir la décoloration de la frontière.

couleur d'arrière-plan:- #93cde9

couleur de premier plan:- #c4e4f3

Quelqu'un peut-il m'aider??

Comment ajouter un effet de fondu à la frontière comme de l'image ci-jointe

utiliser les ombres.. mais il ne fonctionne pas sous IE 8 ou moins 🙂

OriginalL'auteur Divyanshu Das | 2013-04-19

  1. 2
    div {
   box-shadow: 0px 0px 8px #ffffff; 
   -webkit-box-shadow: 0px 0px 8px #ffffff; 
   -ms-box-shadow: 0px 0px 8px #ffffff;
   -o-box-shadow: 0px 0px 8px #ffffff; 
}

    look: http://jsfiddle.net/waS6F/2/ 🙂

    solution pour IE:
    Zone d'ombre dans IE7 et IE8, CSS3 Box Effet d'Ombre pour IE8?

    hopely utile !

    très proche... thnx.... 🙂 J'ai ajouté le code exact ci-dessous....

    OriginalL'auteur egig

  2. 1

    Peut-être avec un box-shadow?

    Ici est un simple violon:

    http://jsfiddle.net/GLmQd/1/

    Et voici quelques liens pour en savoir plus

    http://css-tricks.com/snippets/css/css-box-shadow/

    https://developer.mozilla.org/en-US/docs/CSS/box-shadow

    OriginalL'auteur Sprottenwels

  3. 0

    Par exemple, vous pouvez l'utiliser.

    <div id="img"><img ... /></div>

<style type="text/css">

#img{
border-style:1px solid green;
opacity: 0.3;
-webkit-transition: opacity .1s ease-in-out;
-moz-transition: opactiy .1s ease-in-out;
-ms-transition: opacity .1s ease-in-out;
-o-transition: opacity .1s ease-in-out;
transition: opacity .1s ease-in-out;
}

#img:hover{
opacity: 1;
    -webkit-transition: opacity .1s ease-in-out;
    -moz-transition: opactiy .1s ease-in-out;
    -ms-transition: opacity .1s ease-in-out;
    -o-transition: opacity .1s ease-in-out;
    transition: opacity .1s ease-in-out;
}
</stlye>
    Ouais et vous pouvez ajouter de l'ombre au lieu de frontière. box-shadow:inset 0 0 10px #00FF00;

    OriginalL'auteur Kamil Oczkowski

  4. 0

    C'est comment je l'ai réalisé:-

    html:-

    <div class="shadow-efect>
<div>

    sass:-

    .shadow-effect
  background-color: #b9daeb
  -webkit-box-shadow: 0 0 10px 10px #b9daeb
  -moz-box-shadow: 0 0 10px 10px #b9daeb
  box-shadow: 0 0 10px 10px #b9daeb

    OriginalL'auteur Divyanshu Das