html - redondos - imagen redonda bootstrap
Círculos redondeados(radio de borde) Problema de Safari (10)
.activity_rounded {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
behavior: url(css/PIE.htc);
}
<img src="img/demo/avatar_3.jpg" class="activity_rounded" alt="" />
Este es mi CSS y HTML. Quiero hacer que una imagen se vea como un círculo. Todo funciona bien en IE8 +, Google Chrome y Mozilla Firefox. Pero Safari está actuando un poco extraño. Aquí hay una foto de demostración:
¿Has probado el marcado a mano?
-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius
Parece que hay algunos errores al usar la notación abreviada con algunas versiones de Safari.
En lugar de poner el borde en la imagen en sí, colóquelo en el contenedor. Asegúrese de que el radio del borde esté en la imagen y el contenedor
.img-container {
border-radius 100%;
border: solid 1px #000;
overflow: hidden;
}
.img {
border-radius: 100%;
}
Intenta esto agregando overflow: hidden; al conjunto de reglas. Este es un problema con todos los navegadores webkit:
.activity_rounded {
-webkit-border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 3px solid #fff;
behavior: url(css/PIE.htc);
overflow: hidden;
}
La manera simple que hice fue usar imágenes PNG redondeadas y aplicar un borde y un radio del 50%
ejemplo:
Para ilustrar el problema en Safari, comencemos con una imagen simple.
Aquí tenemos una imagen de 100px x 100px. Agregar un borde de 3px aumenta las dimensiones del elemento a 106px x 106px:
Ahora le damos un radio de frontera del 20%:
Puede ver que comienza a recortar desde el límite exterior del elemento, no desde la imagen misma.
Aumentando aún más la magnitud al 50%:
Y cambiando el color del borde a blanco:
Ahora puede ver cómo surge el problema.
Debido al comportamiento del navegador, al crear una imagen en un círculo con un borde, debemos asegurarnos de que tanto la imagen como el borde tengan un radio de borde. Una forma de garantizar esto es separar el borde de la imagen colocando la imagen dentro de un contenedor y aplicar un radio de borde a ambos.
<div class="activity_rounded"><img src="http://placehold.it/100" /></div>
.activity_rounded {
display: inline-block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
border: 3px solid #fff;
}
.activity_rounded img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
vertical-align: middle;
}
Y ahora tenemos un bonito círculo alrededor de la imagen en Safari.
Ver DEMO .
Parece que esto funciona:
.wrap{
-webkit-transform: translateZ(0);
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}
Pero si tiene un borde con radio en un div y dentro de él tiene contenido dinámico (como si hace clic en ese div, se desliza hacia abajo y muestra otro contenido), y desea rediseñar su borde con el mismo radio, usted puede usar una clase auxiliar que redibuja el radio (pero el truco es que si no cambias el color del borde, el webkit no lo volverá a dibujar).
P.ej:
$(document).on(''click'', ''.parent'', function(e){ $(''.content'').toggleClass(''opened'').slideToggle(300);
$(this).toggleClass(''refreshBorders'');
});
.parent{
cursor:pointer;
text-align:center;
-webkit-border:2px solid black;
-moz-border:2px solid black;
border:2px solid black;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-background-clip:padding-box;
transition: all 0.15s ease-in-out;
}
.content{
text-align:center;
display:none;
}
.opened{
display:inline-block;
}
.refreshBorders{
-webkit-border:2px solid red;
-moz-border:2px solid red;
border:2px solid red;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
-webkit-background-clip:padding-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="first">
<h1> title </h1>
</div>
<div class="content">
<p> content content content</p>
</div>
</div>
Si el radio de borde de la imagen se establece igual que su div principal, la solución aceptada funciona bien para imágenes circulares pero no rectángulos redondeados porque el ancho de la imagen es menor que el de su div principal y el radio del borde debe escalarse en proporción a la imagen, de lo contrario, la imagen aparecerá más redondeada que la div principal y habrá un espacio entre los bordes interiores del div principal y los bordes externos de la imagen.
Sin embargo, si puede especificar los anchos de su div / imagen en dimensiones absolutas, es posible establecer un radio de borde para la imagen para que se ajuste exactamente dentro de su div principal, teniendo en cuenta el ancho del borde.
HTML:
<div class="image-container-1"><img src="my_image.jpg" /></div>
<div class="image-container-2"><img src="my_image.jpg" /></div>
CSS:
.image-container-1 {
border: 6px solid #FF0000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
height: 250px;
overflow: hidden;
width: 250px;
}
.image-container-2 {
border: 6px solid #FF0000;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
height: 250px;
overflow: hidden;
width: 250px;
}
.image-container-2 img {
border-radius: 14px; /* 20px border radius - 6px border */
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
height: 250px;
width: 250px;
}
Esta solución también se probó en Internet Explorer 9 y Chrome 43 y los resultados fueron los mismos.
Simplemente use box-shadow si no le importan los navegadores antiguos.
.rounded {
box-shadow: 0 0 0 10px pink;
}
no use la position:relative|absolute atributo de estilo position:relative|absolute para su overflow:hidden esquina redondeada
por ejemplo
<style>
.rounded_corner_style
{
background-color: #00FF00;
width: 100px;
height: 100px;
overflow: hidden;
border-radius:100px; /* you can also use border-radius:100% | border-radius:2px*/
}
</style>
<div class="rounded_corner_style">
<img src="https://i.stack.imgur.com/Kgblc.png" style="height:100%"/>
</div>