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?

我有每个浏览器的所有不同前缀加上标准的边框半径:

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.坎波斯

推荐答案

Webkit 无法处理子代和孙代+ 的边框半径裁剪.就是这么糟糕.如果您想要裁剪边框，则必须直接在放置图像的 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屋！