Prefácio: Em meu artigo "Solução semiperfeita para moldura de canto arredondado super suave", resumi sete soluções diferentes para caixas de canto arredondado, que basicamente resumem as soluções populares de implementação de caixas de canto arredondado na Internet. E em meu outro artigo "Pictureless Peak Corner" há outro método alternativo de implementação.
Implementar cantos arredondados com CSS puro é um evento que todos dizem ser ruim. Também escrevi dois artigos de resumo. Por que ainda existe este artigo? Em nossos projetos anteriores, a implementação de cantos arredondados era muitas vezes realizada através de imagens de fundo. Porém, quando esses projetos eram divulgados online, durante o processo de manutenção, às vezes era necessário adicionar alguns novos requisitos porque eram amplamente utilizados em projetos anteriores. imagens de canto são usadas, e essas imagens são todas mescladas usando sprites CSS. Para não adicionar mais trabalho extra e também não querer usar JS para adicionar mais solicitações http, algumas soluções CSS simples são necessárias para resolver esta questão. Quanto à minha preferência pessoal, também gosto de usar uma abordagem sem imagens para lidar com estes efeitos. Sempre sinto que o CSS pode fazer o trabalho, por que não deixar que seja feito?
Princípio de implementação :
O princípio de implementar uma caixa de canto arredondado usando CSS puro foi explicado em detalhes por muitas pessoas na Internet. O diagrama abaixo é o efeito depois de ampliar um dos cantos arredondados.
Pelas renderizações acima, podemos ver que esta caixa arredondada é na verdade composta por containers. Cada container tem uma largura diferente. Essa largura é obtida pela margem, como: margin:0 5px. e os lados direitos têm 5 pixels e há 5 linhas de cima para baixo. As margens são 5px, 3px, 2px e 1px, diminuindo em ordem. Portanto, com base neste princípio, podemos implementar estrutura e estilo HTML simples.
1. Camada de estrutura HTML:
<div class="cor nítida1">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">Conteúdo de texto</div>
</div>
<b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
</div>
b1~b4 constituem as duas estruturas de canto arredondado esquerdo e direito acima, enquanto b5~b8 constroem as duas estruturas de canto arredondado esquerdo e direito abaixo. Conteúdo é o corpo principal do conteúdo. Coloque tudo em um contêiner grande e dê a ele um nome de classe nítido para definir um estilo comum. Em seguida, um nome de classe color1 é sobreposto a ele. Esse nome de classe é usado para distinguir diferentes esquemas de cores, pois pode haver cantos arredondados de cores diferentes.