Avatar for Username

Pesquisar no site de suporte

Evite golpes de suporte. Nunca pedimos que você ligue ou envie uma mensagem de texto para um número de telefone, ou compartilhe informações pessoais. Denuncie atividades suspeitas usando a opção “Denunciar abuso”.

Saiba mais

Esta discussão foi arquivada. Faça uma nova pergunta se precisa de ajuda.

Código @property não funcionando no Mozilla

  • Nenhuma resposta
  • 0 tem este problema
  • 5 visualizações
Ari Fagundes
Ari Fagundes
more options

Estou fazendo uma borda estilizada no CSS que utiliza o código:

"a.btn-linkedin { 

 text-align: center;
 align-items: center;
 justify-content: center;
 width: 90px;
 color: white;
 box-shadow: 0 0 20px rgba(100, 0, 194, 0.5);

 --border-angle: 0turn;
 --main-bg: conic-gradient(from var(--border-angle),
     rgb(0, 0, 0) 5%,
     rgb(0, 0, 0) 60%,
     rgb(0, 0, 0) 95%);

 border: solid 1.5px transparent;
 border-radius: 2em;
 --gradient-border: conic-gradient(from var(--border-angle), #945dd6, #8a64d7, #8169d7, #796ed6, #7173d4, #607bd7, #5082d9, #3f89d9, #1194d9, #009dd5, #00a6cf, #13adc7);

 background:
   var(--main-bg) padding-box,
   var(--gradient-border) border-box,
   var(--main-bg) border-box;

 background-position: center center;

 animation: bg-spin 2s linear infinite;

}

@keyframes bg-spin { 

 to {
   --border-angle: 1turn;
 }

}

@property --border-angle { 

 syntax: "<angle>";
 inherits: true;
 initial-value: 0turn;

}"

Esse código permite a borda do meu button se mover em 360 graus através da border radius do meu botão. Porém esse código somente funciona no Chrome, no Mozilla eu não consigo fazer funcionar. Alguém tem alguma sugestão?

Estou fazendo uma borda estilizada no CSS que utiliza o código: "a.btn-linkedin { text-align: center; align-items: center; justify-content: center; width: 90px; color: white; box-shadow: 0 0 20px rgba(100, 0, 194, 0.5); --border-angle: 0turn; --main-bg: conic-gradient(from var(--border-angle), rgb(0, 0, 0) 5%, rgb(0, 0, 0) 60%, rgb(0, 0, 0) 95%); border: solid 1.5px transparent; border-radius: 2em; --gradient-border: conic-gradient(from var(--border-angle), #945dd6, #8a64d7, #8169d7, #796ed6, #7173d4, #607bd7, #5082d9, #3f89d9, #1194d9, #009dd5, #00a6cf, #13adc7); background: var(--main-bg) padding-box, var(--gradient-border) border-box, var(--main-bg) border-box; background-position: center center; animation: bg-spin 2s linear infinite; } @keyframes bg-spin { to { --border-angle: 1turn; } } @property --border-angle { syntax: "<angle>"; inherits: true; initial-value: 0turn; }" Esse código permite a borda do meu button se mover em 360 graus através da border radius do meu botão. Porém esse código somente funciona no Chrome, no Mozilla eu não consigo fazer funcionar. Alguém tem alguma sugestão?