Pixelated edge вокруг CSS-круга с переполнением: hidden;

Ответ 1

Использование фонового градиента

Это не требует дополнительной разметки html. Я протестировал его на Firefox (и это подтверждено для работы с Safari и Chrome, см. Комментарии). Это делает фон глаза фиолетовым цветом на некотором расстоянии от края, а затем желтым остальное, используя радиальный фоновый градиент для цвета. Это, по-видимому, позволяет избежать "смешивания" (и пожелтения) вдоль края, где он пытается "спрятать" на основе комбинаций border-radius и overflow: hidden.

Вот пример оригинального решения/скрипта с 1px фиолетового цвета. Однако, если тень удалена, вы все равно можете обнаружить обесцвечивание. Поэтому я обновил ответ ниже до 2px широкой фиолетовой границы, которая эта подмигающая кошка с удаленной теневой тканью показывает, что обесцвечивание не происходит.

Вот код (обновленный до 2px):

.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: #fad73f; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover,  #fad73f 0, #fad73f 48px, #821067 49px); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0,#fad73f), color(48px,#fad73f), color-stop(49px,#821067)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  #fad73f 0,#fad73f 48px,#821067 49px); /* IE10+ */
    background: radial-gradient(ellipse at center,  #fad73f 0,#fad73f 48px,#821067 49px); /* W3C */

    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    position: relative;
    display: inline-block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

Ответ 2

Я считаю, что пикселирование, которое вы воспринимаете, является результатом box-shadow, а не border-radius или overflow.

Браузер пытается нарисовать строку 1px #2b2b2b на внутренней стороне круга. Эта строка обязательно будет выглядеть зубчатой, так как она на криволинейном пути и должна выглядеть как 1px по ширине.

Попробуйте установить blur (или третье значение) для свойства box-shadow.

До и после:

Посмотрите разницу между двумя закругленными <div/> в этой jsFiddle demo.

Ответ 3

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

Рабочий пример

<span class="socket">
  <span class="eye">
    <span class="lidT"></span>
    <span class="pup"></span>
    <span class="lidB"></span>
   </span>
</span>

.socket {
    border-radius: 50%;
    height: 102px;
    width: 102px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    overflow: hidden;
    position: relative;
    top: -1px;
    left: -1px;
    display: inline-block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
}
.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: #FAD73F;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    top: 1px;
    left: 1px;
    display: inline-block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

Ответ 4

Смотрите этот ответ: fooobar.com/questions/147871/...

и этот другой уже принятый ответ: Пограничный радиус кровотечения

Попробуйте закрепить свой фон:

.your-element {
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
}

Подумав, это нормальное поведение, чтобы "размыть" крайний пиксель. Браузер пытается сделать что-то в основном квадратным для чего-то раунда. Так или иначе, "промежуточный" пиксель будет размытым, как и выбор фотошопа.

Фотошоп демонстрирует размытый пиксель.

К сожалению, вам придется использовать фоновое изображение, реальное изображение файл .png.

Со своей стороны, я попытался реформировать ваши разметки контейнером для внешнего применения, чтобы применить радиус границы. Пользователь Мошер сделал это отлично, см. его ответ jsfiddle.

Ответ 5

рабочая демонстрация находится здесь: jsFiddle

поместите содержимое .eye в другой контейнер следующим образом:

<span class="eye">
    <div id="eyeCover">
        <span class="lidT"></span>
        <span class="pup"></span>
        <span class="lidB"></span>
    </div>
</span>

удалите overflow:hidden с .eye. новый стиль .eye находится здесь:

.eye {
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: #FAD73F;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    display: inline-block;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.4);
    z-index: 100;
    overflow: visible;   /*  change is here  */
}

измените .lidT и .lidB width на 105px, затем добавьте этот стиль для #eyeCover:

#eyeCover{
width: 102px;
height: 102px;
top:-1px;
left:-1px;
border-radius: 50%;
overflow: hidden;
position: relative;
}

рабочая демонстрация находится здесь: jsFiddle