Creando esquinas redondeadas usando CSS [cerrado]
https://stackoverflow.com/questions/7089
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
¿Cómo puedo crear esquinas redondeadas usando CSS?
Solución
Desde que se introdujo CSS3, la mejor manera de agregar esquinas redondeadas usando CSS es usando el border-radius propiedad.Puede lee las especificaciones en la propiedad, o conseguir algunos información útil de implementación en MDN:
Si está utilizando un navegador que no implementar border-radius (Chrome anterior a v4, Firefox anterior a v4, IE8, Opera anterior a v10.5, Safari anterior a v5), luego los enlaces a continuación detallan un montón de enfoques diferentes.Encuentre uno que se adapte a su sitio y estilo de codificación, y úselo.
Otros consejos
Miré esto al principio de la creación de Stack Overflow y no pude encontrar cualquier método de crear esquinas redondeadas que no me hizo sentir como si acabara de caminar por una alcantarilla.
border-radius:
Que es exactamente como te gustaría que funcionara.Aunque esto funciona bien en las últimas versiones de Safari y Firefox, pero no en IE7 (y no creo que en IE8) u Opera.
Mientras tanto, son hacks hasta el final.Me interesa saber qué piensan otras personas que es la forma más limpia de hacer esto en IE7, FF2/3, Safari3 y Opera 9.5 en este momento.
Generalmente obtengo esquinas redondeadas solo con CSS, si el navegador no lo admite, ven el contenido con esquinas planas.Si las esquinas redondeadas no son tan importantes para su sitio, puede utilizar estas líneas a continuación.
Si desea utilizar todas las esquinas con el mismo radio, esta es la forma más sencilla:
.my_rounded_corners{
-webkit-border-radius: 5px;
border-radius: 5px;
}
pero si quieres controlar cada rincón 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 puede ver, en cada conjunto tiene estilos específicos del navegador y en la cuarta fila declaramos de manera estándar esto asumimos que si en el futuro los demás (con suerte, IE también) deciden implementar la función para que nuestro estilo esté listo para ellos también.
Como se dijo en otras respuestas, esto funciona muy bien en Firefox, Safari, Camino, Chrome.
Si está interesado en crear rincones en IE, esto puede resultarle útil: http://css3pie.com/
Recomendaría usar imágenes de fondo.Las otras formas no son tan buenas:Sin antialiasing ni marcas sin sentido.Este no es el lugar para usar JavaScript.
Como dijo Brajeshwar:Utilizando el border-radius selector css3.Ya puedes aplicar -moz-border-radius y -webkit-border-radius para navegadores basados en Mozilla y Webkit, respectivamente.
Entonces, ¿qué pasa con Internet Explorer?.Microsoft tiene muchos comportamientos para hacer que Internet Explorer tenga algunas funciones adicionales y obtenga más habilidades.
Aquí:a .htc archivo de comportamiento para obtener round-corners de border-radius valor 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 es un selector válido, pero puede colocarlo en un archivo CSS diferente con comentarios condicionales (solo para IE).
Con la compatibilidad con CSS3 implementada en las versiones más recientes de Firefox, Safari y Chrome, también será útil consultar "Border Radius".
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
Como cualquier otra abreviatura de CSS, lo anterior también se puede escribir en formato expandido y así lograr diferentes radios de borde para la parte superior izquierda, superior derecha, 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;
jQuery es la forma en que lidiaría con esto personalmente.La compatibilidad con CSS es mínima, las imágenes son demasiado complicadas, poder seleccionar los elementos que desea tener esquinas redondeadas en jQuery tiene mucho sentido para mí, aunque algunos sin duda argumentarán lo contrario.Hay un complemento que utilicé recientemente para un proyecto en el trabajo aquí: http://plugins.jquery.com/project/jquery-roundcorners-canvas
Siempre existe la forma JavaScript (ver otras respuestas), pero como se trata puramente de estilo, estoy en contra del uso de scripts de cliente para lograrlo.
La forma que prefiero (aunque tiene sus límites) es usar 4 imágenes de esquinas redondeadas que colocarás en las 4 esquinas de tu caja 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 del cuadro redondeado debe ser liso, 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 mediante el uso de una hoja de sprites.
Personalmente, esta solución me gusta más, es un .htc que permite a IE representar bordes curvos.
http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser
En Safari, Chrome, Firefox > 2, IE > 8 y Konquerer (y probablemente otros) puedes hacerlo en CSS usando el border-radius propiedad.Como todavía no forma parte oficialmente de la especificación, utilice un prefijo específico del proveedor...
Ejemplo
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Las soluciones JavaScript generalmente añaden un montón de pequeños divs para que parezca redondeado, o usan bordes y márgenes negativos para hacer esquinas con muescas de 1px.Algunos también pueden utilizar SVG en IE.
En mi opinión, la forma CSS es mejor, ya que es fácil y se degradará elegantemente en los navegadores que no lo admiten.Por supuesto, este es solo el caso en el que el cliente no los aplica en navegadores no compatibles, como IE < 9.
Aquí hay una solución HTML/js/css que hice recientemente.Hay un error de redondeo de 1 px con 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 el segundo envoltorio interno, pero me gusta usar margen en el envoltorio interno para que los márgenes de los párrafos y encabezados aún mantengan el colapso del margen.También puedes omitir el jquery y simplemente poner el contenedor interno en el html.
Como indicación de lo complejo que es conseguir que las esquinas redondeadas funcionen, incluso Yahoo los desalienta (ver el primer punto)!Por supuesto, en ese artículo solo hablan de esquinas redondeadas de 1 píxel, pero es interesante ver que incluso una empresa con su experiencia ha llegado a la conclusión de que son demasiado dolorosos. para que funcionen la mayor parte del tiempo.
Si su diseño puede sobrevivir sin ellos, esa es la solución más sencilla.
Claro, si tiene un ancho fijo, es muy fácil usar CSS y no es nada ofensivo ni laborioso.Es cuando necesitas escalar en ambas direcciones que las cosas se ponen entrecortadas.Algunas de las soluciones tienen una cantidad asombrosa de divs apilados uno encima del otro para que esto suceda.
Mi solución es dictarle al diseñador que si quiere usar esquinas redondeadas (por el momento), debe tener un ancho fijo.A los diseñadores les encantan las esquinas redondeadas (a mí también), por lo que considero que este es un compromiso razonable.
Fronteras Ruzee es la única solución de esquinas redondeadas suavizada basada en Javascript que he encontrado que funciona en todos los principales navegadores (Firefox 2/3, Chrome, Safari 3, IE6/7/8), y TAMBIÉN es la única que funciona cuando ambos El elemento redondeado Y el elemento principal contienen una imagen de fondo.También crea bordes, sombras y brillos.
el mas nuevo RUZEE.Borde sombreado es otra opción, pero carece de soporte para obtener información de estilo de CSS.
Si va a optar por la solución de radio de borde, existe este increíble sitio web para generar el CSS que hará que funcione para Safari/Chrome/FF.
De todos modos, creo que tu diseño no debería depender de las esquinas redondeadas, y si miras Twitter, simplemente dicen F **** a los usuarios de IE y Opera.Es bueno tener esquinas redondeadas, y personalmente estoy de acuerdo en conservarlas para los usuarios interesantes que no usan IE :).
Ahora bien, por supuesto que no es la opinión de los clientes.Aqui esta el link : http://border-radius.com/
Además de las soluciones de HTC mencionadas anteriormente, aquí hay otras soluciones y ejemplos para alcanzar esquinas redondeadas en IE.
No existe "la mejor" manera;Hay formas que funcionan para usted y otras que no.Dicho esto, publiqué un artículo sobre la creación de una técnica fluida de esquinas redondeadas basada en CSS+Imagen aquí:
Caja con esquinas redondeadas usando CSS e imágenes - Parte 2
Una descripción general de este truco es que utiliza DIV anidados y repetición y posicionamiento de imágenes de fondo.Para diseños de ancho fijo (ancho fijo y altura extensible), necesitará tres DIV y tres imágenes.Para un diseño de ancho fluido (ancho y alto extensibles), necesitará nueve DIV y nueve imágenes.Algunos podrían considerarlo demasiado complicado, pero en mi humilde opinión es la mejor solución jamás creada.Sin hacks, sin JavaScript.
Escribí un artículo de blog sobre esto hace un tiempo, así que para obtener más información, mira 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 un HTML mínimo que interfiere con las demás cosas.Es muy similar a lo que publicó Mono, pero no contiene ningún truco específico para IE 6 y, después de comprobarlo, no parece funcionar en absoluto.Además, otro truco es hacer que la parte interior de cada imagen de la esquina sea transparente para no bloquear el texto que está cerca de la esquina.La parte exterior no debe ser transparente para que pueda cubrir el borde del div no redondeado.
Además, una vez que CSS3 sea ampliamente compatible con border-radius, esa será la mejor manera oficial de hacer esquinas redondeadas.
No uses CSS, jQuery se ha mencionado varias veces.Si necesita control total del fondo y el borde de sus elementos, proporcione elComplemento de lienzo de fondo de jQuery un intento.Coloca un elemento HTML5 Canvas en el fondo y te permite dibujar cualquier fondo o borde que desees.Esquinas redondeadas, degradados, etc.
Opera aún no es compatible con border-radius (aparentemente estará disponible después de la versión 10).Mientras tanto, puedes use CSS para establecer un fondo SVG para crear un efecto similar.
