Solucionado
Olá.
Ainda estou em dúvida quanto a forma como trabalham as bordas elípticas.
Ou seja, gostaria de saber como os 8 valores abaixo estão trabalhando, pois ainda não ficou muito claro pra mim.
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;e no caso abaixo, por se tratar de apenas 4 valores?
border-radius: 10% 50% / 50% 10%;Desde já agradeço!
hoje, com a Alura e o Google Gemini
Oi Matheus, tudo certo?
Vamos lá, eu também tinha bastante dúvida com esses valores que fogem do padrão no border-radius.
Primeiramente, quando usamos quatro valores de raio, eles se referem, respectivamente ao canto superior esquerdo, superior direito, inferior direito e inferior esquerdo.
Caso seja interessante, podemos passar não um, mas dois raios para cada canto. Sendo possível então criar bordas menos simétricas:
Se deixa um valor, cria um círculo com seu raio de "tantos pixels', se passa dois (que seriam os dois primeiros valores, antes e depois da barra) você cria uma elipse.
Tudo isso para explicar essa "/".
Agora quando temos dois valores..
Quando temos dois valores o primeiro se refere ao canto superior esquerdo, e canto inferior direito. E o segundo valor os restantes. Fiz esse Jsbin se quiser dar uma olhada.
Com relação as %, é tudo calculado com base na largura do elemento. Se a imagem tiver 100px e você colocou border-radius: 50%, ela vai ter na real 50px, o que geraria um círculo.
Espero ter ajudado e bons estudos,
Abcs!
Ok, Natan.
Consegui entender.
Muito obrigado pela atenção!