tabla - Creando esquinas redondeadas usando CSS
redondeado de esquinas (21)
¿Cómo puedo crear esquinas redondeadas utilizando CSS?
Además de las soluciones de htc mencionadas anteriormente, aquí hay otras soluciones y ejemplos para llegar a las esquinas redondeadas en IE .
Aquí hay una solución HTML / js / css que hice recientemente. Hay un error de redondeo de 1px con el posicionamiento absoluto en IE, por lo que desea que el contenedor tenga un número par de píxeles de ancho, pero está bastante limpio.
HTML:
<div class="s">Content</div>
jQuery:
$("div.s")
.wrapInner("<div class=''s-iwrap''><div class=''s-iwrap2''>")
.prepend(''<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>'');
CSS:
/*rounded corner orange box - no title*/
.s {
position: relative;
margin: 0 auto 15px;
zoom: 1;
}
.s-iwrap {
border: 1px solid #FF9933;
}
.s-iwrap2 {
margin: 12px;
}
.s .br,.s .bl, .s .tl, .s .tr {
background: url(css/images/orange_corners_sprite.png) no-repeat;
line-height: 1px;
font-size: 1px;
width: 9px;
height: 9px;
position: absolute;
}
.s .br {
bottom: 0;
right: 0;
background-position: bottom right;
}
.s .bl {
bottom: 0;
left: 0;
background-position: bottom left;
}
.s .tl {
top: 0;
left: 0;
background-position: top left;
}
.s .tr {
top: 0;
right: 0;
background-position: top right;
}
La imagen tiene solo 18 píxeles de ancho y tiene las 4 esquinas juntas. Parece un círculo.
Nota: no necesita la segunda envoltura interna, pero me gusta usar el margen en la envoltura interna para que los márgenes de los párrafos y encabezados aún mantengan el colapso de los márgenes. También puede omitir el jQuery y simplemente colocar el envoltorio interno en el html.
Claro, si es un ancho fijo, es muy fácil usar CSS, y no es para nada ofensivo o laborioso. Es cuando se necesita escalar en ambas direcciones que las cosas se ponen revueltas. Algunas de las soluciones tienen una cantidad asombrosa de divs apilados uno encima del otro para que esto ocurra.
Mi solución es dictar al diseñador que si quiere usar esquinas redondeadas (por el momento), debe tener un ancho fijo. Los diseñadores aman las esquinas redondeadas (yo también), por lo que encuentro que este es un compromiso razonable.
Como dijo Brajeshwar: Usando el selector css3 de
border-radius
borde.
Por ahora, puede aplicar
-moz-border-radius
y
-webkit-border-radius
para los navegadores basados en Mozilla y Webkit, respectivamente.
Entonces, ¿qué pasa con Internet Explorer? Microsoft tiene muchos comportamientos para hacer que Internet Explorer tenga algunas características adicionales y obtenga más habilidades.
Aquí: un archivo de comportamiento
.htc
para obtener
round-corners
del valor de
border-radius
de
border-radius
en su CSS.
Por ejemplo.
div.box {
background-color: yellow;
border: 1px solid red;
border-radius: 5px;
behavior: url(corners.htc);
}
Por supuesto, el selector de comportamiento no tiene un selector válido, pero puede colocarlo en un archivo css diferente con comentarios condicionales (solo para IE).
Como una indicación de lo complejo que es trabajar en las esquinas redondeadas, ¡incluso Yahoo las desalienta (vea el primer punto)! Por supuesto, solo están hablando de esquinas redondeadas de 1 píxel en ese artículo, pero es interesante ver que incluso una empresa con su experiencia ha llegado a la conclusión de que son demasiado dolor para que trabajen la mayor parte del tiempo.
Si tu diseño puede sobrevivir sin ellos, esa es la solución más fácil.
Con el soporte para CSS3 implementado en las versiones más recientes de Firefox, Safari y Chrome, también será útil buscar "Border Radius".
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Al igual que con cualquier otra abreviatura de CSS, lo anterior también se puede escribir en formato expandido, y así lograr un radio de borde diferente para el topleft, topright, etc.
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 7px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 3px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 7px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 3px;
Desde que se introdujo CSS3, la mejor manera de agregar esquinas redondeadas usando CSS es usando la propiedad
border-radius
.
Puede
leer la especificación
en la propiedad u obtener
información de implementación útil en MDN
:
Si está utilizando un navegador que
doesn''t
implement
border-radius
(Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5), los enlaces a continuación detallan un montón de diferentes enfoques.
Encuentre uno que se adapte a su sitio y estilo de codificación, y vaya con él.
En Safari, Chrome, Firefox> 2, IE> 8 y Konquerer (y probablemente otros) puede hacerlo en CSS usando la propiedad
border-radius
.
Como aún no es oficialmente parte de la especificación, use un prefijo específico del proveedor ...
Ejemplo
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Las soluciones de JavaScript generalmente agregan un montón de pequeñas
div
s para que se vea redondeada, o usan bordes y márgenes negativos para hacer esquinas con muescas de 1px.
Algunos también pueden utilizar SVG en IE.
OMI, la forma CSS es mejor, ya que es fácil, y se degradará con gracia en los navegadores que no lo admiten. Este es, por supuesto, solo el caso en el que el cliente no los aplica en navegadores no compatibles, como IE <9.
Escribí un artículo de blog sobre esto hace un tiempo, así que para más información, vea aquí
<div class="item_with_border">
<div class="border_top_left"></div>
<div class="border_top_right"></div>
<div class="border_bottom_left"></div>
<div class="border_bottom_right"></div>
This is the text that is displayed
</div>
<style>
div.item_with_border
{
border: 1px solid #FFF;
postion: relative;
}
div.item_with_border > div.border_top_left
{
background-image: url(topleft.png);
position: absolute;
top: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_top_right
{
background-image: url(topright.png);
position: absolute;
top: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_left
{
background-image: url(bottomleft.png);
position: absolute;
bottom: -1px;
left: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
div.item_with_border > div.border_bottom_right
{
background-image: url(bottomright.png);
position: absolute;
bottom: -1px;
right: -1px;
width: 30px;
height: 30px;
z-index: 2;
}
</style>
Funciona bastante bien. No se necesita Javascript, solo CSS y HTML. Con mínimo HTML interfiriendo con las otras cosas. Es muy similar a lo que publicó Mono, pero no contiene hacks específicos de IE 6, y después de verificar, no parece funcionar en absoluto. Además, otro truco es hacer que la parte interior de cada imagen de la esquina sea transparente para que no bloquee el texto que está cerca de la esquina. La parte exterior no debe ser transparente para que pueda cubrir el borde de la división no redondeada.
Además, una vez que CSS3 sea ampliamente compatible con radio de borde, esa será la mejor manera oficial de hacer esquinas redondeadas.
Generalmente obtengo esquinas redondeadas solo con css, si el navegador no es compatible, ven el contenido con esquinas planas. Si las esquinas redondeadas no son tan importantes para su sitio, puede usar estas líneas a continuación.
Si quieres usar todas las esquinas con el mismo radio, esta es la manera fácil:
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
Pero si quieres controlar todos los rincones, esto es bueno:
.my_rounded_corners{
border: 1px solid #ccc;
/* each value for each corner clockwise starting from top left */
-webkit-border-radius: 10px 3px 0 20px;
border-radius: 10px 3px 0 20px;
}
Como ve en cada conjunto, tiene estilos específicos de navegador y en las cuartas filas declaramos de manera estándar que de esta manera asumimos que en el futuro los otros (con suerte también IE) deciden implementar la función para que nuestro estilo esté listo para ellos.
Como se dijo en otras respuestas, esto funciona maravillosamente en Firefox, Safari, Camino, Chrome.
Miré esto al principio de la creación de y no pude encontrar ningún método para crear esquinas redondeadas que no me hiciera sentir como si acabara de caminar por una alcantarilla.
border-radius:
Que es exactamente como quieres que funcione. Aunque esto funciona bien en las últimas versiones de Safari y Firefox, pero no en absoluto en IE7 (y no creo en IE8) u Opera.
Mientras tanto, son piruetas hasta el fondo. Estoy interesado en escuchar lo que otras personas piensan que es la forma más limpia de hacerlo en IE7, FF2 / 3, Safari3 y Opera 9.5 en este momento.
No hay "la mejor" manera; Hay formas que funcionan para usted y formas que no lo hacen. Dicho esto, publiqué un artículo sobre la creación de una técnica de esquina redondeada fluida basada en imágenes CSS + aquí:
Caja con esquinas redondeadas usando CSS e imágenes - Parte 2
Una visión general de este truco es que utiliza DIV anidados y la posición y repetición de la imagen de fondo. Para diseños de ancho fijo (altura elástica de ancho fijo), necesitará tres DIV y tres imágenes. Para un diseño de ancho fluido (ancho y altura estirables) necesitará nueve DIV y nueve imágenes. Algunos pueden considerar que es demasiado complicado, pero en mi humilde opinión es la mejor solución. No hacks, no JavaScript.
No use CSS, jQuery ha sido mencionado varias veces. Si necesita un control total del fondo y el borde de sus elementos, pruebe el jQuery Background Canvas Plugin . Coloca un elemento HTML5 Canvas en el fondo y te permite dibujar cada fondo o borde que desees. Esquinas redondeadas, degradados y así sucesivamente.
Opera aún no es compatible con el radio de borde (aparentemente estará en la versión posterior a la versión 10). Mientras tanto, puedes usar CSS para establecer un fondo SVG para crear un efecto similar .
Personalmente, esta solución es la que más me gusta, es un .htc para permitir que IE genere bordes curvos.
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
Si está interesado en crear esquinas en IE, esto puede ser útil - http://css3pie.com/
Si va a utilizar la solución de radio de borde, existe este increíble sitio web para generar el css que lo hará funcionar para safari / chrome / FF.
De todos modos, creo que su diseño no debería depender de la esquina redondeada, y si nos fijamos en Twitter, solo le dicen F **** a los usuarios de IE y Opera. Es bueno tener esquinas redondeadas, y personalmente estoy de acuerdo en mantener esto para los usuarios geniales que no usan IE :).
Ahora, por supuesto, no es la opinión de los clientes. Aquí está el enlace: border-radius.com
Siempre hay la forma de JavaScript (ver otras respuestas) pero como es puramente estilístico, estoy en contra de usar scripts de cliente para lograr esto.
La forma que prefiero (aunque tiene sus límites), es usar 4 imágenes de esquinas redondeadas que ubicarás en las 4 esquinas de tu cuadro usando CSS:
<div class="Rounded">
<!-- content -->
<div class="RoundedCorner RoundedCorner-TopLeft"></div>
<div class="RoundedCorner RoundedCorner-TopRight"></div>
<div class="RoundedCorner RoundedCorner-BottomRight"></div>
<div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>
/********************************
* Rounded styling
********************************/
.Rounded {
position: relative;
}
.Rounded .RoundedCorner {
position: absolute;
background-image: url(''SpriteSheet.png'');
background-repeat: no-repeat;
overflow: hidden;
/* Size of the rounded corner images */
height: 5px;
width: 5px;
}
.Rounded .RoundedCorner-TopLeft {
top: 0;
left: 0;
/* No background position change (or maybe depending on your sprite sheet) */
}
.Rounded .RoundedCorner-TopRight {
top: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px 0;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
right: -1px;
}
.Rounded .RoundedCorner-BottomLeft {
bottom: 0;
left: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: 0 -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
bottom: -20px;
}
.Rounded .RoundedCorner-BottomRight {
bottom: 0;
right: 0;
/* Move the sprite sheet to show the appropriate image */
background-position: -5px -5px;
}
/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
bottom: -20px;
right: -1px;
}
Como se mencionó, tiene sus límites (el fondo detrás de la caja redondeada debe ser simple, de lo contrario las esquinas no coincidirán con el fondo), pero funciona muy bien para cualquier otra cosa.
Actualizado: Se mejoró la implementación usando una hoja de sprites.
Yo recomendaría usar imágenes de fondo. Las otras formas no son tan buenas: no hay suavizado y marcas sin sentido. Este no es el lugar para usar JavaScript.
jQuery es la forma en que trataría esto personalmente. El soporte de css es mínimo, las imágenes son demasiado complicadas, para poder seleccionar los elementos que desea tener esquinas redondeadas en jQuery tiene mucho sentido para mí, aunque algunos sin duda dirán lo contrario. Hay un complemento que utilicé recientemente para un proyecto en el trabajo aquí: http://plugins.jquery.com/project/jquery-roundcorners-canvas
Ruzee Borders es la única solución de esquina redondeada y suavizada basada en Javascript que he encontrado que funciona en todos los navegadores principales (Firefox 2/3, Chrome, Safari 3, IE6 / 7/8), y TAMBIÉN el único que funciona cuando Tanto el elemento redondeado Y el elemento principal contienen una imagen de fondo. También hace bordes, sombras y resplandores.
La nueva ruzee.com/blog/shadedborder es otra opción, pero carece de soporte para obtener información de estilo de CSS.