CSS 3 border-radius属性;角色在Chrome中太淡了？ [英] CSS 3 border-radius property; corners too pale in Chrome?

问题描述

我尝试使用圆角与CSS 3，但我得到一个奇怪的错误。在IE9中，一切都显示得很好。但是，在Chrome中，当我尝试向边框添加颜色时，角落本身看起来太淡了。还有谁得到这个错误？

我使用的例子如下：

  border：solid 1px＃000000; 
 -moz-border-radius：10px; 
 -khtml-border-radius：10px; 
 border-radius：10px; 
  

[[已解决]]

感谢您的帮助，问题是。

我对图片进行了四舍五入（可能应该指定此图片），因此边框四舍五入发生在图片后面，即实际边框被四舍五入，看起来好像边框更薄，甚至是透明的。通过改变图像一点点，我设法得到我想要的结果。

再次感谢大家！
NS

解决方案

您的圆角还可能受浏览器的CSS3属性的影响， background-origin 和 background-clip 。

-origin 属性用于确定如何计算某个框中的背景的背景位置。 background-clip 属性用于确定背景是否延伸到边框中。

以下屏幕截图演示两个属性对背景和边框的差异，这可能会影响您的

p>

第一行使用 background-clip：border-box ，第二行指定 background -clip：padding-box 。

I am attempting to use rounded corners with CSS 3, but I am getting a strange bug. In IE9, everything shows up fine. However, in Chrome, the corners themselves seem too pale when I try to add colours to the border. Anyone else getting this bug? Is it even a bug?

An example of what I am using is the following:

border: solid 1px #000000;
-moz-border-radius: 10px;
-khtml-border-radius:10px;
border-radius: 10px;

[[SOLVED]]
Thanks for your help, but I found what the problem was.

I was rounding an image (probably should have specified this), and so the border rounding happened behind the image, i.e. the actual border was being rounded behind it, making it appear as though the border was thinner, or even transparent. By changing the image a little bit I managed to get the results I was looking for.

Thanks again everyone! N.S.

解决方案

Your rounded corners may also be affected by the browser's implementation of the CSS3 properties, background-origin and background-clip.

The background-origin property is used to determine how the background-position of a background in a certain box is calculated. The background-clip property is used to determine whether the backgrounds extends into the border or not.

The following screenshot demonstrates the differences the two properties have on backgrounds and borders, which may be affecting your rounded corners.

The first row uses background-clip: border-box, while the second row specifies background-clip: padding-box.

这篇关于CSS 3 border-radius属性;角色在Chrome中太淡了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！