Crea un cuadro redondeado con CSS

A continuación, crearemos una página xHTML, que contiene dos áreas de contenido contenidas en DIV con ID fijos y FlowBox. Son dos DIV con ancho fijo y ancho no fijo. Ahora crearemos una página para estos dos DIV con esquinas redondeadas. .

La teoría que usamos es que al agregar un fondo a un elemento, la imagen de fondo siempre aparece encima del color de fondo para crear un rectángulo redondeado de color sólido, primero podemos crear un rectángulo normal y luego usar una imagen de esquina redondeada; con el mismo color que el fondo de las cuatro esquinas redondeadas de este elemento para formar un marco de esquinas redondeadas. El método se explicará en detalle a continuación en dos casos: cajas de tamaño fijo y cajas de transmisión de tamaño no fijo.

Agregar esquinas redondeadas a un cuadro de tamaño fijo Paso 1: crear un documento xHTML básico y agregarle un poco de contenido
¿Ver copia simple en el portapapeles?

¿ver copia simple en portapapeles?
cuerpo, html {
margen:0;
relleno: 0;
antecedentes:#a7a09a;
color:#000;
}

cuerpo, html {
margen:0;
relleno: 0;
antecedentes:#a7a09a;
color:#000;
}Paso 2: establezca el ancho y el color de fondo del DIV
¿Ver copia simple en el portapapeles?
div#caja fija {
ancho: 340 px;
margen: 40 píxeles;
antecedentes:#E4ECF9;
}

div#caja fija {
ancho: 340 px;
margen: 40 píxeles;
antecedentes:#E4ECF9;
}Paso 3: haga un rectángulo redondeado según el ancho del DIV. Como configuré el ancho del DIV en 340 px, ahora necesito hacer un rectángulo redondeado con un ancho de 340 px. Después de hacer el rectángulo, coloque la parte superior. De todo el rectángulo con la parte inferior fue recortada y utilizada como imagen DIV. Hice las dos imágenes siguientes:

Paso 4: aplica la imagen al fondo DIV
¿Ver copia simple en el portapapeles?
div#caja fija {
ancho: 340 px;
margen: 40 píxeles;
fondo:#E4ECF9 url(images/bottom.gif) centro inferior sin repetición;
}

div#caja fija {
ancho: 340 px;
margen: 40 píxeles;
fondo:#E4ECF9 url(images/bottom.gif) centro inferior sin repetición;
}div#caja fija h2{
margen:0;
relleno: 2px;
fondo:#E4ECF9 url(images/top.gif) centro superior sin repetición;
}

Arriba aplicamos la imagen llamada Bottom.gif en la parte inferior del DIV y luego usamos Top.gif en el primer elemento H2 del DIV. Por supuesto, lo primero a lo que debemos prestar atención aquí es que no podemos agregar. Margen al valor h2 o agregue relleno o borde al DIV.

Cree un cuadro redondeado de ancho no fijo. Lo que dijimos anteriormente es crear un cuadro redondeado de ancho fijo pero no de altura fija. Esto requiere dos imágenes, superior e inferior. Piénselo por un momento. Encontrará que esta vez tendremos que usar 4 imágenes, una imagen en cada esquina para crear un rectángulo redondeado que se puede reducir de cualquier manera. Aún necesitamos crear un contenedor DIV primero. agregar contenido básico.

Paso 1: crear un documento xHTML
¿Ver copia simple en el portapapeles?

El segundo paso es crear esquinas redondeadas. Cree cuatro esquinas redondeadas en las direcciones superior izquierda, inferior izquierda, superior derecha e inferior derecha. Las esquinas redondeadas completadas que hice son las siguientes:

Paso 3: ¿Establecer el color de fondo de la

copia simple de DIVview en la impresión del portapapeles?
div#flujoBox {
margen: 40 píxeles;
fondo:#C3D9FF;
}

div#flujoBox {
margen: 40 píxeles;
fondo:#C3D9FF;
} Paso 5: Agregar esquinas redondeadas

Para contenedores DIV sin ancho y alto fijos, cualquier esquina redondeada debe poder cambiar su posición de acuerdo con los cambios en el ancho y alto del DIV, por lo que solo podemos agregar esquinas redondeadas al fijo. -width DIV Las imágenes de ancho fijo utilizadas aquí se procesan en dos imágenes pequeñas y se pueden agregar directamente al elemento H2. Ahora, después de agregar el elemento H2, solo obtenemos un lado de la esquina redondeada, y todavía queda. Se obtiene una esquina redondeada que se puede usar en H2, de modo que se resuelven dos esquinas redondeadas, y el elemento p puede proporcionar una esquina redondeada, y el div en sí tiene una esquina redondeada, que son exactamente cuatro esquinas redondeadas.

¿Ver copia simple en el portapapeles?
div#flujoBox {
margen: 40 píxeles;
fondo:#C3D9FF url(images/bottom-left.gif) no repetir abajo a la izquierda;
}

div#flujoBox h2{
margen:0;
relleno: 0;
fondo:#C3D9FF url(images/top-left.gif) no repetir arriba a la izquierda;
}

div#flowBox h2 intervalo{
margen:0;
mostrar:bloquear;
fondo:#C3D9FF url(images/top-right.gif) no repetir arriba a la derecha;
}

div#flujoBox p{
margen:0;
relleno: 0;
fondo:#C3D9FF url(images/bottom-right.gif) no repetir abajo a la derecha;
}