Ошибка коробочной тени и границей в Chrome

Question

Я экспериментировал с CSS3 и нашел что-то странное. Heres это часть стиля 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; 

Rendering в Opera и Firefox такие же, и идеально:

alt text http://i47.tinypic.com/j8egp5.png

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

alt text http://i45.tinypic.com/5doykw.png

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

Answer 1

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

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

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

Answer 2

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

Удачи вам!

Answer 3

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

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

Вы должны были бы добавить границу, как это:

border:solid 7px #fff; 

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

Answer 4

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

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

Answer 5

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

<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> 

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

Спасибо.

Answer 6

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

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

Answer 7

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

Answer 8

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

E.g. если у вас есть белый фон страницы:

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

Answer 9

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

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

Где #fff цвет фона (вне коробки), а # 333 - цвет тени.

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