开发者

CSS 3 border-radius property; corners too pale in Chrome?

开发者 https://www.devze.com 2023-03-14 07:31 出处:网络
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

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 o开发者_开发知识库f 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.

CSS 3 border-radius property; corners too pale in Chrome?

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


maybe try this

-webkit-border-radius: 10px;


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消