Непонятные пиксели

@doqsoftware · Регистрация: 02.07.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте! Написал вот такую разметку

HTML5

<!DOCTYPE html>
<html>
<head>
    <title>Just a test site.</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="custom-cursors.css">
</head>
<body>
    <div class="wrapper">
        <div class="head-main cursor-1">
            Some text here...
        </div>
    </div>
</body>
</html>

CSS:

CSS

html, body {
    margin: 0;
    background: #090909;
}
 
.wrapper {
    padding: 12px 12px;
    display: flex;
    justify-content: space-between;
}
 
.head-main {
    border: 1px solid #ccc;
    border-radius: 5%;
    padding: 5px;
    color: #aaa;
    text-align: center;
    box-sizing: border-box;
    transition: 0.15s;
}
 
.head-main:hover {
    border-color: red;
}

custom-cursors.css:

CSS

1
2
3

.cursor-1 {
    cursor: pointer;
}

Меня интересует то, что после наведения на div сверху по бокам остаются какие-то непонятные пиксели, поигравшись понял, что из-за изменения border-radius. Если задавать в пикселях, тогда все нормально. Почему так?
До наведения: [del]
Название: Ri3NKQJ.png
Просмотров: 9

Размер: 815 байт

Название: Ri3NKQJ.png
Просмотров: 9

Размер: 815 байт

После: [del]
Название: 9i70ePI.png
Просмотров: 9

Размер: 841 байт

@AlexZaw · 04.06.2018, 18:21

Приведенный код работает нормально, никаких лишних пикселей нет, проверьте масштаб и надстройки браузера

@AlexZaw Модератор 2172 / 1571 / 626 Регистрация: 07.08.2016 Сообщений: 3,836
	04.06.2018, 18:21	2
	Приведенный код работает нормально, никаких лишних пикселей нет, проверьте масштаб и надстройки браузера 0

Опции темы