Artigo Introdução de wulin.com (www.vevb.com): Aprenda um pouco de html5+css3 todos os dias, acumule a experiência lentamente e comece no básico. O seguinte apresenta principalmente os botões de player simples desenho.
Aprenda um pouco de HTML5+CSS3 todos os dias, acumule a experiência lentamente e comece com o básico. O seguinte apresenta principalmente os botões de player simples de desenho;
Primeiro, vamos ver como é a borda de configuração quando a largura e a altura da div são 0?
O código é o seguinte:
1
As renderizações da operação são as seguintes:
Então, podemos ver algo dessa foto?
Se removermos três das fronteiras, podemos desenhar um triângulo? A resposta é sim. Com apenas um código, você pode desenhar um triângulo:
Efeito:
Agora é fácil desenhar o botão do jogador. Combinado com algumas dicas de anotações de aprendizado e um pouco de adaptação do código para desenhar o triângulo acima, é fácil desenhar o botão do último jogador.
O código é o seguinte:
1
Botão do jogador
Efeito:
Resumo: Este exemplo simples usa principalmente o uso de bordas para desenhar triângulos e transformar ligeiramente, como alterar a largura da borda ou o tamanho da div, para desenhar alguns outros gráficos básicos. Além disso, também são usados cantos arredondados, sombras e transformações gráficas no CSS3.