小编lta*_*ett的帖子

这仍然是Chrome 5.0.375.125的最新版本,这是撰写本文时的最新Windows版本.

此处会跟踪错误:http: //code.google.com/p/chromium/issues/detail？id = 25334

所以,问题是,如果您使用的是Windows或Linux,并且有人在也具有border-radius的元素上使用了插入框阴影,则会出现错误 - 边框半径被保留,但插入框 - 阴影溢出来,好像它仍然是一个方盒子.它在Mac OS X上的Chrome中按预期工作.

使用纹理背景的人不能使用这种黑客,因为它需要不透明的边框颜色.它也只适用于较小的半径.

这个黑客的两个部分.一个小Javascript(jQuery + jQuery.client插件):

if ($.client.browser == "Chrome" && $.client.os != "Mac"){
  $('html').addClass("inset-radius-hack");
};

和CSS

#div{
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 4px 0 inset;
  padding: 5px 10px;
  margin-bottom: 10px;
  max-width: 120px;
}

  html.inset-radius-hack #div {
    border: 2px …