CSS边框半径不剪裁Webkit上的图像 [英] CSS Border radius not trimming image on Webkit

问题描述

我无法弄清楚为什么使用chrome而不是firefox或ie9时，我的#screen元素的border-radius已经消失了？

I'm having trouble figuring out why border-radius is gone from my #screen element when using chrome but not firefox or ie9?

我有所有的不同每个浏览器的前缀加上标准border-radius：

I have all the different prefixes for each browser plus the standard border-radius:

www.cenquizqui.com

www.cenquizqui.com

保存图片，名为#screen

The upper content box that holds the pictures, called #screen

屏幕css的复制粘贴：

a copy paste of screen's css:

#screen {background: none repeat scroll 0 0 #EEEEEE;
    display: block;
    height: 300px;
    position: relative;
    width: 960px;
    overflow:hidden;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;}

是因为chrome不处理修剪的图像？我认为这只是一个问题，当你有圆角容器内的实际标签，而不是当img通过css称为背景图像。

Is it because chrome does not handle the 'trimming' of the images properly? I thought it was only a problem when you had the actual tags inside the rounded corner container, not when the img is called as background-image through css.

尊敬
G.Campos

Regards G.Campos

推荐答案

Webkit无法处理儿童和grand-children的边框半径裁剪。这只是那么糟糕。如果你想要边框裁剪，它必须直接在div上放置图像，而不需要在层次结构中更深入。

Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.

这篇关于CSS边框半径不剪裁Webkit上的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！