Закругленные корны (радиус границы) Сафари

Ответ 1

Чтобы проиллюстрировать проблему в Safari, давайте начнем с простого изображения.

Здесь мы имеем изображение 100px x 100px. Добавление границы 3px увеличивает размеры элемента до 106px x 106px:

Теперь мы даем ему радиус границы 20%:

Вы можете видеть, что он начинает обрезку с внешней границы элемента, а не из самого изображения.

Дальнейшее увеличение величины до 50%:

И изменение цвета рамки на белый:

Теперь вы можете увидеть, как возникает проблема.

Из-за такого поведения браузера при создании изображения в круге с границей мы должны убедиться, что на изображении и границе задан радиус границы. Один из способов обеспечить это, чтобы отделить границу от изображения, поместив изображение внутри контейнера и применив радиус границы к обоим.

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

И теперь у нас есть хорошая граница круга вокруг изображения на Safari.

См. DEMO.

Ответ 2

Кажется, это работает:

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

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

Ответ 3

Вы пробовали разметку длинной руки?

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

Похоже, есть некоторые ошибки при использовании короткой нотации с некоторыми версиями Safari.

Ответ 4

Простым способом я использовал скругленные изображения PNG и применил границу и радиус 50%

пример:

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

Ответ 5

Просто используйте box-shadow, если вам не нравятся старые браузеры.

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

Ответ 6

Попробуйте это, добавив overflow: hidden; в набор правил. Это проблема со всеми браузерами 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;
}

Ответ 7

Вместо того, чтобы поместить границу на изображение, поместите его в контейнер. Убедитесь, что радиус границы находится на изображении и в контейнере

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

.img {
    border-radius: 100%;
}

Ответ 8

Если радиус границы изображения задан так же, как и его родительский div, принятое решение отлично работает для круговых изображений, но не закругленных прямоугольников, потому что ширина изображения меньше, чем ширина его родительского div, а радиус границы должен быть масштабируется пропорционально изображению, иначе изображение будет выглядеть более округлым, чем родительский div, и между внутренними ребрами родительского div и внешними краями изображения будет промежуток.

Однако, если вы можете указать ширину div/image в абсолютных размерах, вы можете установить радиус границы для изображения так, чтобы он точно вписывался в его родительский div, принимая во внимание ширину рамки.

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

РЕЗУЛЬТАТ:

Это решение также было протестировано в Internet Explorer 9 и Chrome 43, и результаты были одинаковыми.

Ответ 9

Но если у вас есть граница с радиусом на div и внутри нее, у вас есть динамический контент (например, если вы нажмете на этот div, он сдвинется вниз и покажет другой контент), и вы хотите перепроектировать свою границу с тем же радиус, вы можете использовать класс aux, который перерисовывает радиус (но взлом заключается в том, что если вы не измените цвет границы, веб-кит не будет перерисовывать его).

Например:

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

Ответ 10

не используйте атрибут стиля position:relative|absolute для overflow:hidden  закругленный угол

например

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