web-dev-qa-db-fra.com

Coins arrondis (rayon de rayon) Édition Safari

.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="" />

Ceci est mon CSS et HTML. Je veux qu'une image ressemble à un cercle. Tout fonctionne bien dans IE8 +, Google Chrome et Mozilla Firefox. Mais Safari est un peu étrange. Voici une image de démonstration: enter image description here

htmlcsscss3
44
Ivanka Todorova

Pour illustrer le problème dans Safari, commençons par une image simple.

Ici, nous avons une image de 100px x 100px. L'ajout d'une bordure de 3px augmente les dimensions de l'élément à 106px x 106px:

Nous lui donnons maintenant un rayon de 20%:

Vous pouvez voir qu'il commence à être rogné à partir de la limite extérieure de l'élément, pas à partir de l'image elle-même.

Augmentation supplémentaire de la magnitude à 50%:

Et changer la couleur de la bordure en blanc:

Vous pouvez maintenant voir comment le problème se pose.

En raison d'un tel comportement du navigateur, lors de la création d'une image dans un cercle avec une bordure, nous devons nous assurer que l'image et la bordure ont un rayon de bordure. Pour ce faire, séparez la bordure de l'image en plaçant l'image dans un conteneur et appliquez un rayon à la bordure.

<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;
}

Et maintenant, nous avons une bordure de cercle de Nice autour de l'image sur Safari.

Voir DEMO .

108
Antony

Semble que celui-ci fonctionne:

.wrap{
   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

24
nakrill

De manière simple, j'ai utilisé des images PNG arrondies et appliqué une bordure et un rayon de 50%.

exemple : 

http://www.laugfs.lk/#ourbusiness

2
Thilanka De Silva

Avez-vous essayé le balisage à la main?

-webkit-border-top-left-radius 
-webkit-border-top-right-radius 
-webkit-border-bottom-left-radius 
-webkit-border-bottom-right-radius

Il semble que l'utilisation de la notation abrégée avec certaines versions de Safari pose des problèmes.

2
Kiwi1

Utilisez simplement box-shadow si vous ne vous souciez pas des anciens navigateurs.

.rounded {
  box-shadow: 0 0 0 10px pink;
}
2
Jin Liu

Si le rayon de la bordure de l'image est identique à celui de son div parent, la solution acceptée convient parfaitement aux images circulaires mais pas aux rectangles arrondis car la largeur de l'image est inférieure à celle de son div parent et le rayon de la bordure doit être mis à l'échelle proportionnellement. l’image apparaîtra plus arrondie que la div parente et il y aura un écart entre les bords intérieurs de la div parente et les bords extérieurs de l’image.

Cependant, si vous pouvez spécifier vos largeurs div/image en dimensions absolues, il est possible de définir un rayon de bordure pour l'image afin qu'elle s'adapte exactement à son div parent, en tenant compte de la largeur de la bordure.

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;
 }

RÉSULTAT:  Border radius clipping example for Safari 5.1.0 and Firefox 35.1.0

Cette solution a également été testée dans Internet Explorer 9 et Chrome 43 et les résultats sont identiques.

1
Noel Whitemore

Essayez ceci en ajoutant overflow: hidden; à l'ensemble de règles. Ceci est un problème avec tous les navigateurs 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;
}
1
Praveen Kumar Purushothaman

Au lieu de placer la bordure sur l'image elle-même, placez-la sur le conteneur. Assurez-vous que la bordure-rayon est à la fois sur l'image et le conteneur

.img-container {
    border-radius 100%;
    border: solid 1px #000;
    overflow: hidden;
}

.img {
    border-radius: 100%;
}
1
James Hartig

Mais si vous avez une bordure de rayon sur une div et qu’elle contient un contenu dynamique (comme si vous cliquez sur cette div, celle-ci glisse vers le bas et affiche un autre contenu) et vous peut utiliser une classe aux qui redessine le rayon (mais le hack est que si vous ne modifiez pas la couleur de la bordure, le kit Web ne la redessinera pas).

Par exemple:

$(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>

0
GeorgeR

n'utilisez pas l'attribut de style position:relative|absolute pour votre overflow:hidden élément de coin arrondi

par exemple

<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>
0
karthikeyan ganesan