Função mod() do CSS

Definição e uso

CSS do mod() A função retorna o módulo restante de uma divisão de um número (dividendo) por outro número (divisor)

Exemplo: mod(9, 2) = 1 (9 / 2 = 4; 4 * 2 = 8, resto = 1)

Exemplo: mod(9, -2) = 1. (9 / -2 = 4; 4*-2 = -8, resto =-1)

Explicação: 9 / -2 = -4.5, mas arredondado para -4; -4 * -2 = 8, devido à direção do arredondamento, a conta real é 9 - 8 = 1, ou diretamente de acordo com a definição do resto, obtemos o número inverso -1 de 1, note que o sinal do resultado é o mesmo que o do divisor. Na prática, o tratamento do mod pode variar de uma implementação para outra, mas geralmente segue as regras de resto matemático e considera o sinal do divisor.

Notas:Os resultados sempre adotam o sinal do divisor.

Exemplos

Alguns mod() Exemplos:

line-height: mod(9, 2); /* 1 */
line-height: mod(19, 4); /* 3 */
line-height: mod(3.5, 3); /* 0.5 */
padding: mod(9%, 2%); /* 1% */
padding: mod(19px, 4px); /* 3px */
padding: mod(19rem, 4rem); /* 3rem */
rotate: mod(120deg, 25deg); /* 20deg */
rotate: mod(120deg, -25deg); /* -20deg */
rotate: mod(-90deg, 15deg); /* 5deg */
rotate: mod(-90deg, -15deg); /* -5deg */

Sintaxe do CSS

mod(dividend, divisor)
Valor Descrição
dividend Obrigatório. Dividendo (número, porcentagem ou tamanho).
divisor Obrigatório. Divisor (número, porcentagem ou tamanho).

Detalhes técnicos

Versão: CSS4

Suporte do navegador

Os números na tabela representam a versão do navegador que suporta completamente a função pela primeira vez.

Chrome Edge Firefox Safari Opera
125 125 118 15.4 111

Páginas relacionadas

Referência:Função acos() do CSS

Referência:Função asin() do CSS

Referência:Função atan() do CSS

Referência:Função atan2() do CSS

Referência:Função calc() do CSS

Referência:Função cos() do CSS

Referência:Função exp() do CSS

Referência:Função hypot() do CSS

Referência:Função log() do CSS

Referência:Função pow() do CSS

Referência:Função sin() do CSS

Referência:Função sqrt() do CSS

Referência:Função tan() do CSS