es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Utilizar el esquema de contorno de un solo lado y la propiedad outline-offset.

22 Jul, 2023 Programación

Me gustaría poner un marco interno a una imagen con outline y outline-offset pero solo en la parte superior e inferior, sin embargo no existe outline-offset-top, outline-offset-bottom, outline-offset-left o outline-offset-right.

¿Alguien sabe alguna forma o alternativa para hacer esto?

img {
    vertical-align: middle;
    border-style: none;
    outline: 70px solid white;     
    outline-offset: -70px;
}


    <img src="https://cdnnmundo1.img.sputniknews.com/img/07e5/08/17/1115327694_182:0:2230:2048_1920x0_80_0_0_0642590b6896368f2c051719f7c66ea7.jpg">

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Desafortunadamente, no hay una forma de utilizar outline-offset específicamente para la parte superior e inferior. Sin embargo, existen alternativas para lograr un efecto similar. Una forma de hacer esto es utilizar box-shadow en lugar de outline y ubicarlo solo en la parte superior e inferior. Aquí tienes un ejemplo:

    img {
  vertical-align: middle;
  border-style: none;
  box-shadow: 0 -70px 0 white, 0 70px 0 white; /* sombras superiores e inferiores */
}

    Esto añadirá una sombra blanca en la parte superior e inferior de la imagen, creando efectivamente un marco. Puedes ajustar el tamaño de la sombra cambiando el valor 70px.

Comments are closed.