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.

El contorno CSS no es un rectángulo nítido.

19 Jul, 2023 Programación

Descripción de la imagen

No quiero que mi esquema tenga esquinas redondeadas, pero se redondea mientras se ensancha durante la animación.

Editar: Estoy obteniendo la siguiente apariencia en Linux, MS Edge, y viendo tu reacción, lo intenté en Mozilla Firefox, parece funcionar perfectamente como quiero. Pero para aquellos que puedan usar MS Edge, ¿hay alguna solución aplicable?

Codepen

.btn {
  width: 20%;
  height: 15%;
  font-size: larger;
  border: none;
  background-color: darkgrey;
  transition: outline-offset 1s;
}</p>

<p>.btn.border-pop:hover {
  outline: solid darkgrey;
  outline-offset: 10px;
}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para evitar que el contorno tenga esquinas redondeadas durante la animación, puedes agregar la propiedad outline-radius y configurarla como 0 en los selectores .btn y .btn.border-pop:hover. Esto asegurará que el contorno se mantenga rectangular durante toda la animación. Así es como se vería el código actualizado:

    .btn {
  width: 20%;
  height: 15%;
  font-size: larger;
  border: none;
  background-color: darkgrey;
  transition: outline-offset 1s;
  outline-radius: 0;
}

.btn.border-pop:hover {
  outline: solid darkgrey;
  outline-offset: 10px;
  outline-radius: 0;
}

    Esto debería funcionar en la mayoría de los navegadores modernos, incluyendo Chrome, Firefox y Edge. Si aún tienes problemas con MS Edge, puedes verificar si el navegador compatible con la propiedad outline-radius o intentar usar otro enfoque para lograr el efecto deseado.

Comments are closed.