Não entendi porque esse valor faz com que seja renderizadoas linhas no background. Em outro tópico, foi dada a seguinte explicação:
"Olá André,
Esse valor na verdade é uma sacada a primeira vista um pouco complexa, mas uma vez que você entende é bem interessante.
A idéia aí é fazer um background que seja uma linha exata com curvatura de 45º, e que repetí-lo na tela crie esse feito de listrado.
Para isso, é feito uma linha de gradiente de 28px (14px + 14px) visto aqui:
linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.1) 14px, rgba(255,255,255,.1) 15px, transparent 15px, transparent)Depois disso, deixamos o css repetir esse gradiente por toda a tela (é só não setar a propriedade background-repeat). A sacada, é que para essa linha diagonal de 28px caber no espaço do background, precisamos calcular exatamente o background-size.
Um dos jeitos mais simples de calcular isso por exemplo, é o teorema de pitágoras (para futuras referências: https://pt.wikipedia.org/wiki/Teorema_de_Pit%C3%A1goras ) onde no nosso caso, a linha diagonal tem tamanho 28, então podemos calcular usando o teorema:
28ˆ2 = bˆ2 + cˆ2 Porém, no nosso caso, nosso background é um quadrado, logo b e c tem o mesmo tamanho. Se você resolver a equação
28ˆ2 = 2*bˆ2 vai chegar em algo próxima a 20. daí o valor.
Se você quiser experimentar se realmente entendeu, experimenta mudar o valor do gradiente pra algo menor, por exemplo 15, e recalcular o tamanho necessário pra dar o efeito de listrado novamente.
Espero ter ajudado, depois me diz se você conseguiu."
Mas eu não consegui entender a parte em que ele fala Para isso, é feito uma linha de gradiente de 28px (14px + 14px) visto aqui:
linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.1) 14px, rgba(255,255,255,.1) 15px, transparent 15px, transparent)
