Cómo redondear bordes en html. Radio de borde: esquinas redondeadas en CSS
Todos los navegadores modernos admiten estándares de marcado de hipertexto HTML5 y estilos de diseño CCS3. Y si su sitio (plantilla) admite estándares modernos, entonces puede realizar cambios en el diseño, como redondear esquinas, sombras y rellenos degradados, sin recurrir a editores gráficos.
Los webmasters de todo el mundo utilizan esquinas redondeadas en bloques y marcos de sitios web. En este artículo te contaré cómo redondear las esquinas de imágenes y fotografías en un sitio web sin usar programas de terceros, solo usando CSS.
Para que los ejemplos dados en el artículo se muestren correctamente en su pantalla, debe utilizar las últimas versiones de los navegadores, Firefox, Chrome y aquellos basados en ellos: Yandex.Browser, Amigo, etc.
Redondear esquinas de bloques DIV
Según el estándar CSS3, para que el bloque DIV tenía esquinas redondeadas, necesita ser estilizado radio-frontera, por ejemplo así:
Radio del borde: 10 px;
Para mayor claridad, dibujemos dos bloques con esquinas rectas y redondeadas:
Bloque con ángulos rectos
Bloque con esquinas redondeadas
Redondear las esquinas de las imágenes
Por analogía con el ejemplo anterior, puede redondear las esquinas de las imágenes del sitio, por ejemplo fotografías. Para mayor claridad, redondeemos las esquinas de la foto de la página.
Aquí está la imagen sin procesamiento CSS.
Y ahora con esquinas redondeadas:
Radio del borde: 10 px;
Para hacerlo realmente “hermoso”, agreguemos algunos bordes desde el principio...
Radio del borde: 10 px; borde: 5px #ccc sólido;
y luego las sombras:
Radio del borde: 10 px; borde: 5px #ccc sólido; sombra de cuadro: 0 0 10px #444;
La siguiente opción (esquinas redondeadas con sombra sin borde) se parece mucho a una alfombrilla de ratón:
Radio del borde: 10 px; sombra de cuadro: 0 0 10px #444;
Y por último, una completa burla de la imagen.
Radio fronterizo: 50%; borde: 5px #cfc sólido; sombra de cuadro: 0 0 10px #444;
Si abre la imagen en una nueva ventana, verá que (la imagen) no ha cambiado y que todas las esquinas, sombras, etc. son solo el resultado del procesamiento. CSS estilos por su navegador.
Una pequeña digresión lírica
Estilo borde aumenta el tamaño de la imagen por la cantidad del borde. Si se especifica un valor borde: 5px, la imagen final será 10 píxeles más ancha y más alta. Tenga esto en cuenta, en algunos casos es posible que el diseño del sitio no funcione.
un estilo sombra de caja no afecta el tamaño de la imagen, la sombra parece pasar sobre los elementos vecinos. Al usarlo, el diseño del sitio no se ve afectado.
Cómo redondear las esquinas de las imágenes en WordPress
En todos los ejemplos anteriores, escribí estilos directamente en las etiquetas del código html. Por ejemplo, el último se ve así:
Esto es bueno cuando necesitas reorganizar una imagen o fotografía. ¿Y si quieres cambiarlo todo? Bueno, no tendrás que recorrer todo tu sitio para editar la visualización de cada uno. En la mayoría de los casos, etiqueta de WordPress IMG define varias clases de estilo. Uno por el nombre único del archivo de imagen, otro por tamaño y otro por alineación. Puede complementar uno de ellos con los parámetros anteriores.
Por ejemplo, para todas las imágenes para las que no se especifica la alineación, en el archivo estilo.css Para su tema de WordPress, ingrese lo siguiente:
Alignnone (radio-borde: 10px; borde: 5px #cfc sólido; sombra-cuadro: 0 0 10px #444;)
O el método más estricto para todas las imágenes del sitio. Redefinimos el estilo de todas las etiquetas. IMG:
Img (radio-borde: 10px; borde: 5px #cfc sólido; sombra-cuadro: 0 0 10px #444;)
La última opción es adecuada no sólo para WordPress, sino también para cualquier CMS. E incluso por simple HTML páginas en el caso de que, al mostrar imágenes, la etiqueta IMG no se asignan clases de estilo. Pero ten cuidado. Si anula las opciones de visualización de etiquetas IMG¡Cambiarás la apariencia de TODAS las imágenes del sitio!
En lugar de una conclusión
Todos los ejemplos del artículo son condicionales y su único objetivo es demostrar algunas de las capacidades de CSS para el procesamiento de imágenes y mostrar lo simple que es.
Todo el mundo está cansado desde hace tiempo de las tradicionales esquinas rectangulares en el diseño de sitios web. Están de moda las esquinas redondeadas, que no se realizan mediante imágenes, sino mediante estilos, para los que se utiliza la propiedad border-radius. Esta propiedad puede tener uno, dos, tres o cuatro valores separados por un espacio, los cuales determinan el radio de todas las esquinas o de cada una individualmente.
en la mesa 1 muestra diferente número de valores y el tipo de bloque que se obtiene en este caso.
| Código | Descripción | Vista |
|---|---|---|
| div (radio-borde: 10px;) | Radio de redondeo para todas las esquinas a la vez. | |
| div (radio-borde: 0 10px;) | El primer valor establece el radio de las esquinas superior izquierda e inferior derecha, el segundo valor establece el radio de las esquinas superior derecha e inferior izquierda. |  |
| div (radio-borde: 20px 10px 0;) | El primer valor establece el radio de la esquina superior izquierda, el segundo, tanto la superior derecha como la inferior izquierda, y el tercer valor, la inferior derecha. |  |
| div (radio-borde: 20px 10px 5px 0;) | Establece secuencialmente el radio de las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda. |  |
El ejemplo 1 muestra cómo crear un bloque con esquinas redondeadas.
Ejemplo 1. Esquinas de un bloque
HTML5 CSS3 IE 9+ Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 1.
Arroz. 1. Bloque con esquinas redondeadas
Se puede obtener un efecto interesante si establece el radio de redondeo para que sea mayor que la mitad de la altura y el ancho del elemento. En este caso, obtendrás un círculo. El ejemplo 2 muestra cómo crear un botón redondo con una imagen.
Ejemplo 2: botón redondo
HTML5 CSS3 IE 9+ Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 2.
Arroz. 2. Botón redondo
En el navegador Opera, redondeando a
La propiedad border-radius se puede combinar con otras propiedades, por ejemplo, agregando una sombra a un elemento. En el ejemplo 3, se crea un conjunto de círculos, uno de los cuales se resalta usando box-shadow. Este conjunto se puede utilizar para navegar por páginas o fotografías.
Ejemplo 3. Resplandor
HTML5 CSS3 IE 9+ Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 3.
Arroz. 3. Brilla alrededor del círculo.
Usando border-radius puedes hacer no solo un círculo, sino también una elipse, así como un redondeo elíptico para un bloque. Para hacer esto, no debe escribir un valor, sino dos, separados por una barra. Escribir 20px/10px significa que el radio horizontal del filete será de 20 píxeles y el radio vertical será de 10 píxeles. El ejemplo 4 muestra cómo crear esquinas elípticas para agregar un título de estilo cómic a una foto.
Ejemplo 4: elipses
HTML5 CSS3 IE 9+ Cr Op Sa Fx
El resultado de este ejemplo se muestra en la Fig. 4.
Arroz. 4. Usar esquinas elípticas
También puede cambiar la apariencia de las esquinas de las imágenes agregando la propiedad border-radius al selector de img, como se muestra en el Ejemplo 5.
Ejemplo 5: Imágenes
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Esquinas redondeadas en CSS Se puede hacer de muchas maneras, muchísimas, y algunas de ellas pueden considerarse obsoletas, ya que CSS 3 introdujo nuevas propiedades que le permiten redondear las esquinas de los elementos HTML. Sin embargo, en primer lugar, los navegadores antiguos no admiten estas propiedades y, en segundo lugar, en el cerebro creativo de un diseñador a veces nacen ideas que sólo los métodos antiguos pueden salvar. Por lo tanto, aquí veremos varias opciones diferentes para crear esquinas redondeadas en CSS: desde las más simples hasta las más complejas.
En estos ejemplos, las esquinas de los elementos inicialmente de bloque están redondeadas y, en algunos ejemplos, estos bloques se utilizan como elementos auxiliares. Pero recuerde que puede hacer lo mismo fácilmente con elementos de nivel de línea, preconfigurandolos con block o inline-block si es necesario.
Esquinas redondeadas en CSS 3 sin imágenes
Este ejemplo utiliza propiedades de CSS 3 que le permiten redondear esquinas fácilmente sin la ayuda de imágenes.
Ejemplo de HTML y CSS: redondear esquinas con CSS 3 sin imágenes
Descripción del ejemplo
- Para redondear las esquinas utilizamos la propiedad CSS 3, que todos los navegadores modernos entienden.
- Para los navegadores más antiguos Firefox, Chrome y Safari, utilizamos propiedades especiales con los prefijos -moz- y -webkit-, que aparecían antes de que se admitiera la propiedad principal. Desafortunadamente, no existen análogos similares para los antiguos Opera e IE. Tenga en cuenta que al crear curvas complejas, es posible que las propiedades con prefijos no funcionen correctamente. Es por eso que en el código CSS se enumeraron más arriba que la propiedad principal, de modo que según prioridades de estilo, los navegadores que ya entienden "puro" lo utilizan.
Las propiedades con prefijos no están en la especificación CSS, por lo que su uso generará un código no válido.
Esquinas redondeadas en CSS sin imágenes.
Este ejemplo tampoco tiene imágenes, pero utiliza bloques adicionales. La esencia del método es que antes y después del contenido principal se indican varios bloques que, a medida que se alejan de él, van disminuyendo gradualmente de ancho utilizando los márgenes laterales externos. Gracias a esto se produce la imitación de esquinas redondeadas.
Este método es malo porque el código está "lleno" de bloques adicionales, pero, desafortunadamente, en muchos ejemplos dichos bloques estarán presentes. Otra desventaja es que con radios de curvatura grandes habrá que añadir incluso más bloques de los utilizados en el ejemplo.
Ejemplo de HTML y CSS: redondear esquinas sin utilizar imágenes
Descripción del ejemplo
- Dentro del bloque con class="block" indicamos un elemento para el contenido principal ("content_block") delante del cual colocamos bloques para simular el redondeo de esquinas ("b1", "b2", "b3"). Después las ponemos igual, pero en orden inverso.
- Configuramos los bloques de simulación a la altura y los márgenes laterales (CSS) requeridos para crear la apariencia de esquinas. También restablecemos su tamaño de fuente (CSS) y lo configuramos en :oculto; esto está destinado a navegadores más antiguos que pueden aumentar la altura y hacerlo más grande de lo especificado.
- En este ejemplo, además de redondear las esquinas, también se agregó una imitación de un marco, si no la necesita, simplemente elimine todos los "bordes" de los elementos y elimine el color de fondo del "b3"; bloquear.
La forma más sencilla de hacer que aparezcan esquinas redondeadas en CSS es utilizar una imagen como fondo del elemento. En este caso, las dimensiones del elemento suelen especificarse igual que el tamaño de la imagen de fondo. La desventaja de este método es que el contenido del elemento no debe extenderse más allá de su alcance, es decir, debe tener un tamaño limitado determinado.
Ejemplo de HTML y CSS: redondear esquinas usando una imagen
Descripción del ejemplo
- Usando la propiedad CSS, configuramos el bloque como una imagen de fondo, cuya reproducción vertical y horizontal está prohibida (sin repetición), ya que en este caso esto no es necesario.
- Para evitar que el texto dentro del bloque toque sus bordes, configuramos su relleno (CSS) en 5px en cada lado.
- A continuación, debe configurar el bloque con las mismas dimensiones que el fondo. Nuestra imagen de fondo tiene unas dimensiones de 140x32 píxeles, pero especificamos el ancho (CSS) y el alto (CSS) del bloque en sí, reducido en 10px. Tuve que reducirlo debido a esos mismos rellenos internos, que también expanden el elemento en 5 píxeles en cada dirección.
En el ejemplo anterior, el tamaño del bloque era fijo y dependía del tamaño de la imagen de fondo, lo cual es muy inconveniente. Ahora cambiaremos el tamaño del ancho de nuestro bloque. Para hacer esto, recorta tres partes de la imagen: los lados y una parte del centro. Luego colocaremos dos elementos de tamaños fijos dentro del bloque principal, que gracias al posicionamiento absoluto se colocarán de lado. Démosles las mismas partes laterales que el fondo y la parte central para el bloque principal. Esto nos dará un bloque con esquinas redondeadas y un ancho variable.
Esta técnica se utiliza muy a menudo para redondear elementos de una sola línea, como enlaces o títulos de secciones/menús.
Ejemplo de HTML y CSS: redondear esquinas usando bloques laterales
Descripción del ejemplo
- Dentro del bloque class = "block" colocamos dos elementos: "left_bok" y "right_bok", a los que asignamos imágenes de las partes laterales como fondo (CSS) y prohibimos su reproducción (sin repetición). Para el bloque principal en sí, configuramos el fondo desde la parte central y permitimos que se duplique solo horizontalmente (repetir-x).
- Especificamos el ancho de los bloques laterales correspondiente al tamaño del fondo; para nosotros es 14x32 píxeles. Pero para el bloque principal, como en el ejemplo anterior, configuramos la altura en 22px para compensar el relleno vertical.
- Colocaremos nuestras paredes laterales en relación con "bloque", por lo que especificamos :relativo para él y absoluto para las paredes laterales mismas. Bueno, luego los presionamos en los lados correspondientes del padre usando las propiedades CSS y .
- Para evitar que el contenido del bloque quede oculto debajo de las imágenes laterales, configuramos "bloque" para que tenga relleno lateral (CSS), que puede ser igual o ligeramente más grande que los propios lados. También establecemos pequeños márgenes en la parte superior e inferior para que el texto no se “pegue” a los bordes.
En IE6 hay un pequeño error con este método:
Si el ancho o alto del "bloque" es impar, aparecerá una sangría desagradable de 1 px entre el borde interior del bloque y la barra lateral ubicada a la derecha, lo que arruinará toda la imagen. Este error se puede solucionar usando Hackear CSS con cierta expresión, pero ni siquiera daré un ejemplo aquí, ya que a menudo congela el navegador y es mejor no usarlo.
Hagámoslo diferente. Establezcamos el margen izquierdo (CSS) "right_bok" al 100% para que se mueva más allá del borde derecho del bloque principal y luego lo devolvamos, moviéndolo hacia la izquierda una cantidad de píxeles igual a su ancho. IE6 funciona correctamente con los valores de estas propiedades, por lo que no le queda más remedio que colocar el bloque donde lo necesitemos.
Este método de redondear esquinas es similar al anterior, pero a diferencia de él, aquí no se colocan elementos HTML en los lados, sino los que se agregan al bloque principal. pseudoelementos. Gracias a este enfoque, fue posible deshacerse del código HTML innecesario de la página.
Ejemplo de HTML y CSS: redondear esquinas utilizando pseudoelementos laterales
Descripción del ejemplo
- Usando pseudoelementos CSS indicamos que queremos agregar algo al principio y al final del bloque principal. Y, usando la propiedad CSS, simplemente agregamos las imágenes necesarias de esquinas redondeadas, o mejor dicho, lados. Entonces creamos dos pseudoelementos con imágenes.
- Bueno, entonces hacemos exactamente lo mismo que en el ejemplo anterior, solo que trabajamos con los pseudoelementos creados.
Para IE6 e IE7, en este ejemplo se utilizaron las siguientes "muletas":
- Como sabe, IE6 e IE7 no comprenden los pseudoelementos utilizados aquí, por lo que hacemos lo siguiente. Usamos expresión, que integra dos etiquetas dentro del elemento principal, y les damos los mismos estilos que en el ejemplo anterior. Tenga en cuenta que el código inyectado que viene después del primer HTML interno se agrega inmediatamente después de la etiqueta "bloque" de apertura, y después del segundo HTML interno se agrega antes de la etiqueta de cierre. Sí, en nuestro caso esto no importa, ya que se utiliza posicionamiento absoluto, pero a veces es útil saberlo.
- Para evitar que otros navegadores vean este código, lo incluimos en comentarios condicionales. Sería mejor si lo colocara en un archivo CSS separado, que esté conectado con una etiqueta cerrada con los mismos comentarios.
Esquinas redondeadas en CSS usando envoltura de bloques
La esencia de este método es que primero se recortan las esquinas de la imagen. Luego, dentro del bloque principal, se colocan varios bloques más (según el número de esquinas), que se encajan entre sí. A cada uno de ellos se le asigna una esquina de la imagen como fondo. Se prohíbe la reproducción de imágenes y se dan coordenadas para que se ubiquen en las esquinas de los bloques. Así se obtiene el efecto de esquinas redondeadas.
Ejemplo de HTML y CSS: redondear esquinas usando Block Wrap
Descripción del ejemplo
- Colocamos cuatro más dentro del bloque principal. Dado que ninguno de estos bloques tiene márgenes o bordes, y sólo el más interno tiene sangrías, todos son iguales en alto y ancho.
- Usando la propiedad CSS, configuramos cada uno de los bloques internos en una esquina como fondo, les prohibimos reproducirse y los ubicamos en las esquinas de los bloques. Y como el color de fondo de los elementos es transparente, las cuatro esquinas del fondo son visibles en la página.
- Agregue el color de fondo deseado al bloque exterior con la esquina. Todo está listo.
Puede establecer explícitamente el ancho del bloque especificando la propiedad deseada en class="block" , pero para cambiar la altura debe usar el elemento más interno (para nosotros es "rb").
Esquinas redondeadas en CSS usando posicionamiento
Aquí también se recortan las esquinas para el fondo, que se indicará en los bloques pequeños. Utilizando el posicionamiento absoluto de CSS, estos bloques se colocan en las esquinas del elemento principal, al que se le asigna el color de fondo deseado.
Ejemplo de HTML y CSS: redondear esquinas mediante posicionamiento
Descripción del ejemplo
- Dentro del elemento principal (class= "block") colocamos cuatro etiquetas con las clases "corn_lt", "corn_rt", "corn_lb", "corn_rb", que actuarán como bloques de esquina.
- Usando la propiedad CSS, conectamos nuestra propia imagen de fondo a cada bloque de esquina y configuramos su ancho y alto para que sean iguales en tamaño a estas imágenes de fondo. Por las dudas, restablecemos el tamaño de fuente (CSS) y recortamos el exceso (CSS).
- Especificamos un posicionamiento relativo para el elemento principal (CSS:relativo), ya que posicionaremos los bloques de las esquinas en relación con él, y para las esquinas mismas, absoluto (absoluto).
- Usando las propiedades CSS y , especificamos distancias de desplazamiento vertical y horizontal para los bloques de las esquinas para que estén ubicados en las esquinas del bloque principal.
Hay un par de problemas con este método en IE6:
- Si el ancho del "bloque" no se especifica explícitamente, las esquinas de la izquierda no encajarán en su lugar. La razón de esto es la presencia de un acolchado interno en el bloque. La forma más sencilla de solucionar el problema es eliminar la sangría y encerrar el contenido principal del "bloque" (sin esquinas) en un contenedor de bloque adicional y luego especificar la sangría requerida en el contenedor. Pero aquí lo hice diferente al habilitar el diseño usando la propiedad zoom :1, que le dice a IE6 que muestre el elemento en su tamaño natural. Esta propiedad no es válida, por lo que si decides utilizarla, te recomiendo que realices la conexión a través de comentarios condicionales.
- El mismo error de un píxel que se analizó anteriormente. Pero aquí se pueden formar espacios no solo entre las esquinas derechas y el lado derecho del bloque, sino también en la parte inferior. Y si nos deshicimos de los espacios de la derecha, esto no funcionará con los de abajo. La solución es especificar explícitamente un ancho y un alto uniformes para el elemento principal. También puede establecer valores impares, pero luego deberá establecer que las distancias para los desplazamientos hacia abajo y hacia la derecha no sean cero, sino -1 px.
Esencialmente, la tecnología para este método de redondear esquinas en CSS es la misma que la anterior, por lo que aquí se omitirán los comentarios detallados. La única diferencia es que en lugar de imágenes de fondo separadas en las esquinas, aquí se utiliza una imagen de sprite común. Gracias a esto, el sitio carga más rápido, porque una imagen “pesa” menos que cuatro y alojamiento hay una apelación en lugar de cuatro.
Un sprite es una imagen que combina varias imágenes utilizadas como fondo para los elementos del sitio web. Qué parte del sprite será el fondo de un elemento HTML en particular depende de las coordenadas especificadas en una propiedad CSS especial.
Ejemplo de HTML y CSS: redondear esquinas usando posicionamiento y sprites
Descripción del ejemplo
- Usando la propiedad CSS, conectamos una imagen de sprite de fondo a los bloques de las esquinas, que tiene una forma redonda con dimensiones de 22x22 píxeles (11x11 píxeles para cada cuarto de esquina).
- Usando la propiedad CSS, especificamos las coordenadas de desplazamiento del fondo. Por ejemplo, un valor de -11px 0 significa que el fondo se desplazará hacia la izquierda 11px en el eje X, pero no se desplazará en el eje Y. Por lo tanto, la mitad izquierda del sprite va más allá del borde del elemento y solo queda la derecha. Pero solo es visible a medias, ya que su altura es de 22 px y la altura del bloque de la esquina en sí es de solo 11 px. Entonces resulta que con este valor, el fondo del elemento será el cuarto superior derecho del sprite.
Con IE6 existen los mismos problemas que en el ejemplo anterior.
En este ejemplo, redondearemos las esquinas de un elemento que tiene un borde, pero esta no es una característica específica de este método en particular; puedes usar fácilmente un redondeo con un borde en los ejemplos anteriores.
Los redondeos los realizaremos utilizando pseudoelementos creados a partir del bloque principal, pero sin aplicarles posicionamiento.
Y una cosa más. En los ejemplos anteriores, las esquinas se cortaron junto con el fondo interior, y esto no siempre es necesario, especialmente si se espera que el fondo de un bloque con esquinas redondeadas no sea uniforme. Por lo tanto, el fondo dentro del marco aquí se hizo transparente (el formato PNG lo permite) y cuando se cortaron las esquinas, su interior también resultó ser transparente. Si es necesario, también puede utilizar un enfoque similar al de los ejemplos anteriores.
Ejemplo de HTML y CSS: redondear esquinas utilizando pseudoelementos
fondo , y con su ayuda los colocamos en el lado derecho y prohibimos la "reproducción". Eso es todo, las esquinas están listas.
Para IE6 e IE7, utilizamos aquí las ya familiares "muletas" con la inyección de código HTML, ya que estos navegadores no comprenden los pseudoelementos utilizados aquí:
- Usando expresión, integramos dos etiquetas dentro del elemento principal, que también convertimos en bloques. Luego les colocamos una etiqueta. Y luego estas etiquetas tienen las mismas propiedades que los pseudoelementos. Lo único es que agregamos adicionalmente la propiedad CSS :relative, sin la cual el marco se superpone a las esquinas.
La desventaja de este método es que no se puede establecer explícitamente la altura de un bloque con esquinas redondeadas, porque si excede el tamaño del contenido, las esquinas inferiores no se presionarán contra los bordes. Esto se puede evitar si aún incluye el contenido principal en otro bloque y establece su altura.
Otro ejemplo de redondeo de esquinas con pseudoelementos y sin bloques adicionales
Este ejemplo es similar al anterior, pero aquí usamos el posicionamiento para organizar los pseudoelementos. Gracias a este enfoque, fue posible especificar explícitamente la altura de un bloque con esquinas redondeadas.
Ejemplo de HTML y CSS: redondear esquinas donde puedes cambiar la altura del bloque
Y nuevamente, para IE6 e IE7, agregamos varios elementos adicionales dentro del bloque principal usando expresiones y cerramos el código en comentarios condicionales. Sólo que esta vez ni siquiera intentaremos emular pseudoelementos, sino que lo haremos de forma más sencilla.
- Agregamos cuatro etiquetas dentro de "bloque" y les aplicamos posicionamiento. Y luego simplemente les mostramos las esquinas de la imagen como fondo y las colocamos en las esquinas del elemento principal. Es decir, actuamos exactamente como en uno de los métodos comentados anteriormente.
- Para deshacerse del error de un píxel (que se mencionó más de una vez anteriormente), agregue un margen izquierdo (CSS) con un valor del 100% y un desplazamiento negativo igual a -9px a los elementos de la esquina derecha. En general, si recuerdas, este desplazamiento debe ser igual al ancho del bloque de la esquina (para nosotros es 11px), pero no te olvides del borde de 2px que tenemos aquí: debemos colocar las esquinas encima. (11px-2px=9px).
Por cierto, de hecho, sería más fácil emular pseudoelementos, como hicimos en el ejemplo anterior; de esta manera habría menos código adicional. Pero no en IE6, este navegador necesitaría algunas "muletas" más y, como resultado, tendría que escribir dos comentarios condicionales- para IE6 e IE7, y esto sólo inflaría el código...
En Firefox, este método funciona correctamente desde la versión 3.6, y en Opera, desde la versión 10.0, no se me ocurrieron muletas para ellos, ya que esto tiene poca relevancia.
Hay muchos ejemplos y tutoriales en Internet para redondear las esquinas de un bloque o mesa, pero, por regla general, estos tutoriales se basan en el uso de imágenes o en el uso de bloques adicionales.
En el tutorial de hoy te mostraré cómo puedes Esquinas de mesa redondas usando solo CSS..
Marcado directo (la segunda tabla difiere en el diseño de las celdas en la fila superior):
| Nulla grávida. | Urna augura. | Nunc iaculis bibendum. | |
| Vestíbulo temporal | Laoreet eros semper ut. | ||
| Vivamus quis nisi lacus. | Cras id felis eu purus tempor dictum in at lorem. | facilisis iaculis magna diam id quam. | eleifend. |
Pellentesque cursus, nunc ut facilisis hendrerit
1. Redondear las esquinas directamente en la mesa (etiqueta de mesa).
BContentTables( borde:1px sólido #CCCCCC; ancho:100%; moz-border-radius: 10px; /* Firefox */ -webkit-border-radius: 10px; /* Safari, Google Chrome */ -khtml-border-radius : 10px; /* KHTML */ -o-border-radius: 10px; /* Opera */ -ms-border-radius: 10px; /* IE8 */ border-radius: 10px /* CSS3 */ desbordamiento: oculto ; margen: 0,7 em automático;
2. Elimine cualquier fondo de la primera línea.
Tr.bCTable_Header (antecedentes: ninguno;)
Tr.bCTable_Header:primer hijo > td:primer hijo( radio-borde:10px 0px 0 0; -webkit-border-radius:10px 0 0 0; -moz-border-radius:10px 0 0 0; -ms- radio-borde:10px 0 0 0; -o-radio-borde:10px 0 0 0; -khtml-radio-borde: 10px 0 0 0 ) tr.bCTable_Header td( color:blanco; tamaño de fuente:110%; color de fondo:#00843C;)
4. Usando la pseudoclase: último hijo y el combinador> seleccione la última celda de la primera fila. Para ello redondeamos la esquina superior derecha.
Tr.bCTable_Header:primer hijo > td:último hijo( radio-borde:0 10px 0 0; -webkit-border-radius:0 10px 0 0; -moz-border-radius:0 10px 0 0; -ms- radio-borde:0 10px 0 0; -o-radio-borde:0 10px 0 0; -khtml-radio-borde: 0 10px 0 0);
5. Redondea las esquinas inferiores de la última línea. No olvides eliminar el fondo de la última línea; El fondo de la fila lo establece el fondo de las celdas de la última fila.
BContentTables tr:last-child( border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; -moz-border-radius:0 0 10px 10px; -ms-border-radius:0 0 10px 10px; -o-borde-radius:0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px;
6. Luego, por analogía con los puntos 3-4, en la última línea redondeamos las esquinas de la primera celda y la exterior.
BContentTables tr:último hijo td(color de fondo:#F1F1F2;) .bContentTables tr:último hijo td:primer hijo( radio-borde:0 0 0 10px; -radio-borde-webkit:0 0 0 10px; -moz-border-radius:0 0 0 10px; -ms-border-radius:0 0 0 10px; -o-border-radius:0 0 0 10px; -khtml-border-radius: 0 0 0 10px;) bContentTables tr:last-child td:last-child (border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -ms-border- radio:0 0 10px 0; -o-border-radius:0 0 10px 0; -khtml-border-radius: 0 0 10px 0);
