Crie uma caixa arredondada com CSS

A seguir criaremos uma página xHTML, que contém duas áreas de conteúdo contidas por DIVs com IDs FixedBox e FlowBox. São dois DIVs com largura fixa e largura não fixa. .

A teoria que usamos é que ao adicionar um fundo a um elemento, a imagem de fundo sempre aparece em cima da cor de fundo para criar um retângulo arredondado de cor sólida, podemos primeiro criar um retângulo normal e depois usar Use uma imagem de canto arredondado; com a mesma cor do fundo de quatro cantos arredondados deste elemento para formar uma moldura de canto arredondado. O método será explicado em detalhes abaixo em dois casos – caixas de tamanho fixo e caixas de streaming de tamanho não fixo.

Adicionando cantos arredondados a uma caixa de tamanho fixo Etapa 1: Crie um documento xHTML básico e adicione um pouco de conteúdo a ele
visualizar cópia simples para impressão da área de transferência?

visualizar cópia simples para impressão da área de transferência?
corpo, html {
margem:0;
preenchimento:0;
plano de fundo:#a7a09a;
cor:#000;
}

corpo, html {
margem:0;
preenchimento:0;
plano de fundo:#a7a09a;
cor:#000;
}Etapa 2: Defina a largura e a cor de fundo do DIV
visualizar cópia simples para impressão da área de transferência?
div#caixafixa{
largura:340px;
margem:40px;
histórico:#E4ECF9;
}

div#caixafixa{
largura:340px;
margem:40px;
histórico:#E4ECF9;
}Passo 3: Faça um retângulo arredondado com base na largura do DIV Como defini a largura do DIV para 340px, agora preciso fazer um retângulo arredondado com largura de 340px. de todo o retângulo com A parte inferior foi recortada e usada como imagem DIV fiz as duas imagens a seguir:

Etapa 4: aplique a imagem ao fundo DIV
visualizar cópia simples para impressão da área de transferência?
div#caixafixa{
largura:340px;
margem:40px;
background:#E4ECF9 url(images/bottom.gif) centro inferior sem repetição;
}

div#caixafixa{
largura:340px;
margem:40px;
background:#E4ECF9 url(images/bottom.gif) centro inferior sem repetição;
}div#fixedBox h2{
margem:0;
preenchimento: 2px;
background:#E4ECF9 url(images/top.gif) sem repetição no centro superior;
}

Acima aplicamos a imagem chamada Bottom.gif na parte inferior do DIV e depois usamos Top.gif no primeiro elemento H2 do DIV Claro, a primeira coisa que precisamos prestar atenção aqui é que não podemos adicionar. Margem para valor h2 ou adicione preenchimento ou borda a DIV.

Crie uma caixa arredondada de largura não fixa O que dissemos acima é criar uma caixa arredondada de largura fixa, mas não de altura fixa. Isso requer duas imagens, superior e inferior. , pense por um momento, você descobrirá que desta vez teremos que usar 4 imagens, uma imagem em cada canto para criar um retângulo arredondado que pode ser reduzido de qualquer forma. Ainda precisamos criar um contêiner DIV primeiro e. adicione conteúdo básico.

Passo 1: Criar documento xHTML
visualizar cópia simples para impressão da área de transferência?

A segunda etapa é criar cantos arredondados. Os cantos arredondados estão nas direções superior esquerda, inferior esquerda, superior direita e inferior direita.

Etapa 3: Definir a cor de fundo do DIVview

plaincopy para clipboardprint?
div#flowBox{
margem:40px;
plano de fundo:#C3D9FF;
}

div#flowBox{
margem:40px;
plano de fundo:#C3D9FF;
} Etapa 5: Adicionar cantos arredondados

Para contêineres DIV sem largura e altura fixas, qualquer canto arredondado deve ser capaz de alterar sua posição de acordo com as alterações na largura e altura do DIV, portanto, só podemos adicionar cantos arredondados ao fixo. -width DIV As imagens de largura fixa usadas aqui são processadas em duas imagens pequenas e podem ser adicionadas diretamente ao elemento H2. Agora, depois de adicionarmos o elemento H2, obtemos apenas um lado do canto arredondado e ainda há. um canto arredondado que pode ser usado em H2 é obtido, de modo que dois cantos arredondados são resolvidos, e o elemento p pode fornecer um canto arredondado, e o próprio div tem um canto arredondado, que é exatamente quatro cantos arredondados.

visualizar cópia simples para impressão da área de transferência?
div#flowBox{
margem:40px;
background:#C3D9FF url(images/bottom-left.gif) sem repetição canto inferior esquerdo;
}

div#flowBox h2{
margem:0;
preenchimento:0;
background:#C3D9FF url(images/top-left.gif) sem repetição no canto superior esquerdo;
}

div#flowBox h2 span{
margem:0;
exibição: bloco;
background:#C3D9FF url(images/top-right.gif) sem repetição no canto superior direito;
}

div#flowBoxp{
margem:0;
preenchimento:0;
background:#C3D9FF url(images/bottom-right.gif) sem repetição canto inferior direito;
}