Как удалить небольшой белый край div?

Ниже приведена часть моего кода. Проблема заключается в том, чтобы удалить крошечные белые линии на синем округлой поле в Mozilla Firefox 50.1.0Как удалить небольшой белый край div?

.s{ 
 
    animation: 2s ease-out 0s normal none infinite running r0; 
 
    background: #639dcf none repeat scroll 0 0; \t 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    float: left; 
 
    height: 90px; 
 
    transition: all 0.2s ease 0s; 
 
    width: 90px; 
 
    margin: 200px; 
 
} 
 
@-webkit-keyframes r0 { 
 
    0% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf; 
 
    } 
 
    10% { 
 
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9; 
 
    } 
 
    100% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf; 
 
    } 
 
} 
 
@-moz-keyframes r0 { 
 
    0% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf; 
 
    } 
 
    10% { 
 
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9; 
 
    } 
 
    100% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf; 
 
    } 
 
} 
 
@keyframes r0 { 
 
    0% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf; 
 
    } 
 
    10% { 
 
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9; 
 
    } 
 
    100% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf; 
 
    } 
 
}

<div type="button" id="menuOrb" class="s m1 "></div>

источник

2017-01-19 Mukul Kant

.... где граница? –

В коде нет ничего «белого». – pol

Я не кодировал границу, но все же вы можете увидеть крошечную белую линию на синей круглой коробке (например, Illusion). вы можете в отпечатке –

Что вы видите на самом деле из-за цвета несоответствие ключевых кадров. Используя клавиши 0% и 100% вы используете цветовой код #639dcf, где 10% вы используете #4f90c9. Это вызывает достаточную разницу между box-shadow и background-color вашего круга, чтобы они выглядели как «белый» промежуток.

Попробуйте изменить ключевые кадры для использования:

0% { 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf; 
    } 
    10% { 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 12px 14px #639dcf; 
    } 
    100% { 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf; 
    }

JSFIDDLE

FIREFOX UPDATE

Испытав в OSX Firefox v50.1.0, вы правы, там представляет собой след сглаживания пикселей, которые окружают круг в результате от border-radius. Чтобы бороться с этим, лучшим решением, которое я нашел, является использование псевдоэлемента :after и «покрытие» оскорбительного следа своей собственной границей.

CSS

.s{ 
    animation: 2s ease-out 0s normal none infinite running r0; 
    background: #639dcf none repeat scroll 0 0; 
    border-radius: 50%; 
    cursor: pointer; 
    float: left; 
    height: 90px; 
    transition: all 0.2s ease 0s; 
    width: 90px; 
    margin: 200px; 
    position:relative; 
} 
.s:after{ 
    content:""; 
    position:absolute; 
    top:-2px; 
    left:-2px; 
    bottom:-2px; 
    right:-2px; 
    border:3px solid #639dcf; 
    border-radius:50%; 
}

Updated Fiddle

Перед VS. после

источник

2017-01-19 06:37:39 haxxxton

Спасибо за ваш ответ, но вы это проверили в 'firefox' –

@Maddy, обновлено, извиниться за предположение о цвете, восстановили предыдущий цвет в моем обновлении и нашли обходное решение – haxxxton

Спасибо за ваши усилия :) –

Дайте .s каймой того же цвета в качестве фона.

.s{ 
 
    animation: 2s ease-out 0s normal none infinite running r0; 
 
    background: #639dcf none repeat scroll 0 0; \t 
 
    border-radius: 50%; 
 
    cursor: pointer; 
 
    border:1px solid #639dcf; 
 
    float: left; 
 
    height: 90px; 
 
    transition: all 0.2s ease 0s; 
 
    width: 90px; 
 
    margin:100px; 
 
} 
 
@-webkit-keyframes r0 { 
 
    0% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf; 
 
    } 
 
    10% { 
 
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9; 
 
    } 
 
    100% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf; 
 
    } 
 
} 
 
@-moz-keyframes r0 { 
 
    0% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf; 
 
    } 
 
    10% { 
 
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9; 
 
    } 
 
    100% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf; 
 
    } 
 
} 
 
@keyframes r0 { 
 
    0% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 0px #639dcf; 
 
    } 
 
    10% { 
 
    box-shadow: 0 0 8px 6px #4f90c9, 0 0 12px 14px #4f90c9; 
 
    } 
 
    100% { 
 
    box-shadow: 0 0 8px 6px #639dcf, 0 0 0px 40px #639dcf; 
 
    } 
 
}

<div type="button" id="menuOrb" class="s m1 "></div>

источник

2017-01-19 06:39:58 ab29007

Как удалить небольшой белый край div?

ответ

Смежные вопросы