Ошибка коробки и тени в Chrome

Я экспериментировал с CSS3 и нашел что-то странное. Вот часть стиля DIV:

border:#446429 solid 1px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;

Рендеринг в Opera и Firefox одинаков и совершенен:

Но Chrome создает тень за пределами границы:

Это должно быть так, или я пропустил что-то важное?

Ответы

Ответ 1

Похоже на известную ошибку:

http://code.google.com/p/chromium/issues/detail?id=29427

Проверьте обсуждение ошибок, вы можете найти обходной путь. Определенно Звезда этой ошибки, если вы хотите, чтобы она была исправлена раньше!

Ответ 2

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

например. если у вас есть страница с белым фоном:

-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset;

Ответ 3

Единственное обходное решение, которое я видел, - это установить границу элемента с тенью и сделать эту границу более широкой, чем диффузия тени. Итак, для вложенной тени следующим образом:

box-shadow:inset 0 0 7px #000;

Вам нужно будет добавить такую рамку:

border:solid 7px #fff;

Это третий номер в объявлении box-shadow, который нужно сопоставить (или превысить) с шириной рамки. если вам не нужна большая жирная старая граница элемента, вам, очевидно, нужно будет сделать границу того же цвета, что и фон за ней. Таким образом, это обходное решение не очень помогает, если ваш элемент находится над узорным изображением или градиентом. Но на твердых цветах он работает прилично.

Ответ 4

Я только что нашел исправление, но ему нужна дополнительная разметка. Нам нужен элемент места с круглыми углами и внутренней тенью в другой контейнер с теми же круглыми углами и скрытым переполнением.

<div class="foo"><div>Hello!</div></div>
<style type="text/css">
    .foo {-webkit-border-radius: 10px; overflow: hidden;}
    .foo div {-webkit-border-radius: 10px; -webkit-box-shadow: inset 1px 1px rgba(50%, 50%, 50%, .5);}
</style>

Объявлено выше fix с граничным краем радиуса границы и несовместимо с фоновым изображением под элементом (из-за цвета границы).

Спасибо.

Ответ 5

Хорошие новости! Похоже, что исправление проходит. Здесь билет в WebKit Bugzilla, обозначенный как разрешенный/исправленный: https://bugs.webkit.org/show_bug.cgi?id=41576

И вот фиксация в багажнике в WebKit Trac! http://trac.webkit.org/changeset/74089

Ответ 6

Попробуйте эту -webkit-box-shadow: вставка 0px 0 7px rgba (255, 242, 94, 0.4); Использование rgba, кажется, исправить.

Удачи!

Ответ 7

Использование отрицательных значений решило проблему для меня.

-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;

Ответ 8

Эта ошибка была исправлена в последней версии canary.:)

Ответ 9

Решение Бет Фолд почти работает, есть лишь небольшая ошибка, он должен выглядеть следующим образом:

-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset;

Где #fff - цвет фона (вне поля), а # 333 - цвет тени.

Третье значение в -webkit-box-shadow определяет размер размытия, а четвертый определяет теневой (непрозрачный) размер, поэтому последний должен быть установлен на 1px.