如何在 Chrome 中制作圆形 Div？

Question

我有这个div，它在放大图像时充当镜头。但问题是我希望它是圆形的。我正在使用它：

-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;

问题在于它使div 成为圆形，但不隐藏不属于圆形的图像角，因此显示一个矩形。

网址是：http://chokate.maninactionscript.com/chokates/

点击沙漠图片，然后在右侧看到更大的图像以获得缩放效果。如果你给镜头divborder 1pxsolid red，那么你可以看到div实际上是圆形的，但它并没有隐藏图像中无用的部分。

有什么想法吗？

Answer 1

好的，为了救赎自己，我认为这可以通过将图像嵌套在另一个 div 中来修复。在 Chrome 中，如果 div 是绝对位置，圆角将不会隐藏溢出，但如果你放入一个非绝对定位的 div 并将圆角 css 应用到该位置并将溢出设置为隐藏，它应该可以正常工作：

<div style='position:absolute'>
   <div style='-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;overflow:hidden'>
      <img src='' />
   </div>
</div>

这里有类似的东西：How to make CSS3 rounded corners hide overflow in Chrome/Opera

Answer 2

不要在该镜头 div 中使用图像，而是尝试将其作为背景图像应用到容器上。背景图片使用 Chrome 的边框半径似乎比使用 img 标签更友好。

Answer 3

边界渲染正确（您可以通过将背景设置为红色并关闭图像来看到） - 问题是图像穿透。我认为你需要简化你的实现。为什么不只有一个 div，以图像为背景，没有内部 div 也没有图像。从这个复杂的代码，所有的 CSS

<div style="position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 200px;
    height: 200px;
    left: 971px;
    top: 311px;
    display: none; ">
    <div style="position: relative;
             border-top-left-radius: 200px 200px;
             border-top-right-radius: 200px 200px;
             border-bottom-right-radius: 200px 200px;
             border-bottom-left-radius: 200px 200px;
             left: -934px; top: 716px; ">
          <img src="/img/rsz_desert_mid.jpg" style="width: 660px; height: 548px; ">
     </div>
 </div>

到

<div id="lens" style="background-position: -513px -12px; top: 100px; left : 100px;"></div>

用css

#lens {
    background-image : url( .... );
    background-repeat: no-repat;
    width : 200px;
    height : 200px;
    border-radius : 200px;
    -mox-border-radius : 200px;
    -webkit-border-radius : 200px;
    position : absolute;
 }

并让 JS 更改 #lens 元素的背景位置和顶部/左侧

Answer 4

你的实现有一个错误，它显示了以前的缩放。

buggy zoom http://www.vertigrated.com/images/buggyzoom.png

Answer 5

如果您在设置了border-radius 的元素中有图像，并且您想隐藏图像的“角落”，则需要在图像上设置border-radius 以匹配。

但在你的情况下这不起作用，因为你的图像比你的包含元素大得多。更好的是使用<div> 作为镜头并设置background-image 以匹配您的图像。

演示：http://jsfiddle.net/ThinkingStiff/wQyLJ/

HTML：

<div id="image-frame">
<img id="image" src="http://thinkingstiff.com/images/matt.jpg" />
<div id="lens" ></div>
<div>

CSS：

#image-frame {
    position: relative;
}

#lens {
    background-repeat: no-repeat;
    border-radius: 150px;
    height: 150px;
    position: absolute;
    width: 150px;
}

脚本：

document.getElementById( 'image-frame' ).addEventListener( 'mousemove', function ( event ) {

    var lens = document.getElementById( 'lens' ),
        image = document.getElementById( 'image' ),
        radius = lens.clientWidth / 2,
        imageTop = this.documentOffsetTop,
        imageLeft = this.documentOffsetLeft,
        zoom = 4,
        lensX = ( event.pageX - radius - imageLeft ) + 'px',
        lensY = ( event.pageY - radius - imageTop ) + 'px',
        zoomWidth = ( image.clientWidth * zoom ) + 'px',
        zoomHeight = ( image.clientHeight * zoom ) + 'px',
        zoomX = -( ( ( event.pageX - imageLeft ) * zoom ) - radius ) + 'px',
        zoomY = -( ( ( event.pageY - imageTop ) * zoom ) - radius ) + 'px';

    if( event.pageX > imageLeft + image.clientWidth 
        || event.pageX < imageLeft
        || event.pageY > imageTop + image.clientHeight 
        || event.pageY < imageTop  ) {

        lens.style.display = 'none';

    } else {

        lens.style.left = lensX;
        lens.style.top = lensY;
        lens.style.backgroundImage = 'url(' + image.src + ')';
        lens.style.backgroundSize = zoomWidth + ' ' + zoomHeight;
        lens.style.backgroundPosition = zoomX + ' ' + zoomY;
        lens.style.display = 'block';

    };

}, false );

window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

输出：