CSS - 角框半径与框阴影插图，丑陋的角落 [英] CSS - Corner Radius with Box Shadow Inset, ugly corners

问题描述

当我尝试对我的元素应用一个盒子阴影有一个3px的边框半径，我得到的元素背景的像素的丑角。

When I try to apply a box shadow to my element that has a 3px border radius I get ugly corners with pixels of the elements background.

HTML

<div id="wrapper">


</div>

CSS

body {
    background: #fff;
}

#wrapper {
    background: black;
    width: 300px;
    height: 300px;
    margin: 40px auto;
    border-radius: 3px;
    -moz-box-shadow: inset 0 0 5px 4px yellow;
    -webkit-box-shadow: inset 0 0 5px 4px yellow;
    box-shadow: inset 0 0 5px 4px yellow;
}

JSFIDDLE
http://jsfiddle.net/PCzFC/1/

JSFIDDLE http://jsfiddle.net/PCzFC/1/

如果你看看小提琴你会看到黑色的背景是在角落里。它应该是这样的还是它是一个错误？我使用Firefox。

If you look at the fiddle you see that the black background is in the corners. Is it supposed to be like this or is it a bug? I use Firefox.

推荐答案

这是Google Chrome中的一个已知错误，也可能存在于Firefox中。
http://code.google.com/p/chromium / issues / detail？id = 29427

This is a known bug in Google Chrome, perhaps it's present in Firefox as well. http://code.google.com/p/chromium/issues/detail?id=29427

这篇关于CSS - 角框半径与框阴影插图，丑陋的角落的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！