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”.

Learn More

Código @property não funcionando no Mozilla

  • Nenhuma resposta
  • 0 tem este problema
  • 7 visualizações
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?

É necessário entrar na sua conta para responder a publicações. Faça uma nova pergunta, se ainda não tiver uma conta.