Estoy tratando de lograr un div como este. Yo tengo el azul de fondo y el color de primer plano. Pero no estoy seguro de cómo obtener el desvanecimiento de la frontera.

color de fondo:- #93cde9

color de primer plano:- #c4e4f3

Puede alguien ayudarme a salir de aquí??

Cómo agregar efecto de desvanecimiento de frontera, como el de la imagen adjunta

  • el uso de las sombras.. pero no funciona en IE 8 o menos 🙂

4 Comentarios

  1. 0

    Por ejemplo, usted puede utilizar que.

    <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>
    • Sí, y usted puede añadir sombra en lugar de frontera. box-shadow:inset 0 0 10px #00FF00;
  2. 0

    Esta es la forma en que lo logra:-

    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

Dejar respuesta

Please enter your comment!
Please enter your name here