Части фонового изображения, видимого при использовании радиуса границы

Question

Части фонового изображения, видимого при использовании радиуса границы

С помощью кода ниже, и Chrome и Opera (последние версии, поддерживающие радиус границы) на Mac, показывают маленькую синюю область вне скругленных углов (который кажется части определенного фонового изображения). Почему?

<!doctype html>
<head>
    <title>Testcase for rounded corners on submit button with bg-image</title>

    <style type="text/css">
        input[type="submit"] { background: url(http://skriblerier.net/div/rounded-corners-input/bg-bottom.png); color: #fff; height: 40px; width: 150px; border-radius: 10px; border: 1px solid #fff; font-size: 14px }
    </style>
</head>
<body>
    <form>
        <div><input type="submit" /></div>
    </form>
</body>

5

css rounded-corners css3

задан skaffman 6 March 2010 в 22:03

1 ответ

Другие вопросы по тегам:

css rounded-corners css3

Похожие вопросы:

score 3 · Answer 1

FF3.6 делает то же самое, но не так заметно (конечно, с -moz-border-radius). Похоже, они пытаются автоматически сгладить углы и просто не могут скрыть весь фон , когда также применена граница . Удаление объявления границы (не радиуса границы) исправит это. Итак:

border-radius: 10px; border: 1px solid #fff; что делает это: border-radius: 10px;

Я подозреваю, но не знаю, что это связано с трудностями подделки полупикселей и вложение круглых форм в растровое изображение, а не в векторное «пространство».