Cách tạo các góc tròn CSS3 ẩn tràn trong Chrome / Opera

Tôi cần các góc tròn trên div cha để che giấu nội dung từ con của nó. overflow: hiddenhoạt động trong các tình huống đơn giản, nhưng phá vỡ các trình duyệt dựa trên webkit và Opera khi cha mẹ được định vị tương đối hoặc tuyệt đối.

Điều này hoạt động trong Firefox và IE9:

CSS

#wrapper {
  width: 300px;
  height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute;
}

#box {
  width: 300px;
  height: 300px;
  background-color: #cde;
}

HTML

<div id="wrapper">
  <div id="box"></div>
</div>

Ví dụ về JSFiddle

Cảm ơn đã giúp đỡ!

CẬP NHẬT: Lỗi gây ra sự cố này đã được khắc phục trong Chrome. Tuy nhiên, tôi chưa kiểm tra lại Opera hoặc Safari.

Tôi tìm thấy một giải pháp khác cho vấn đề này. Điều này trông giống như một lỗi khác trong WebKit (hoặc có thể là Chrome), nhưng nó hoạt động. Tất cả những gì bạn cần làm - là thêm Mặt nạ CSS WebKit vào phần tử #wrapper. Bạn có thể sử dụng một hình ảnh png pixel đơn và thậm chí đưa nó vào CSS để lưu yêu cầu HTTP.

#wrapper {
width: 300px; height: 300px;
border-radius: 100px;
overflow: hidden;
position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */

/* this fixes the overflow:hidden in Chrome */
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

#box {
width: 300px; height: 300px;
background-color: #cde;
}​

Ví dụ về JSFiddle

Thêm chỉ mục z vào mục bán kính đường viền của bạn và nó sẽ che dấu những thứ bên trong nó.

Không bao giờ có tất cả mọi người, tôi quản lý để giải quyết vấn đề bằng cách thêm một div bổ sung giữa trình bao bọc và hộp.

CSS

#wrapper {
    position: absolute;
}

#middle {
    border-radius: 100px;
    overflow: hidden; 
}

#box {
    width: 300px; height: 300px;
    background-color: #cde;
}

HTML

<div id="wrapper">
    <div id="middle">
        <div id="box"></div>
    </div>
</div>

Cảm ơn mọi người đã giúp đỡ!

→ http://jsfiddle.net/5fwjp/

độ mờ đục: 0,99; trên trình bao bọc giải quyết lỗi webkit

Có vẻ như cái này hoạt động:

.wrap {
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

http://jsfiddle.net/qWdf6/82/

Được hỗ trợ trong chrome, opera và safari mới nhất, bạn có thể làm điều này:

-webkit-clip-path: inset(0 0 0 0 round 100px);
clip-path: inset(0 0 0 0 round 100px);

Bạn chắc chắn nên kiểm tra công cụ http://bennettfeely.com/clippy/ !

Không phải là câu trả lời, nhưng đây là lỗi được lưu trong nguồn Chromium: http://code.google.com.vn/p/chromium/issues/detail?id=62363

Thật không may, không giống như bất cứ ai làm việc trên nó. :

thay đổi độ mờ đục của phần tử cha với đường viền và điều này sẽ tổ chức lại các phần tử xếp chồng. Điều này đã làm việc kỳ diệu cho tôi sau nhiều giờ nghiên cứu và thất bại. Nó đơn giản như việc thêm độ mờ 0,99 để tổ chức lại quá trình vẽ trình duyệt này. Kiểm tra http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Đối với tôi không có giải pháp nào hoạt động tốt, chỉ sử dụng:

-webkit-mask-image: -webkit-radial-gradient(circle, white, black);

trên phần tử bao bọc đã làm công việc.

Dưới đây là ví dụ: http://jsfiddle.net/gpawlik/qWdf6/74/

dựa trên câu trả lời tuyệt vời của Graycrow ...

Đây là một ví dụ thực tế hơn có hai div cicular với một số nội dung phụ. Tôi đã thay thế nền png được mã hóa cứng chỉ bằng một giá trị hex, nghĩa là

-=-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

được thay thế bằng

-webkit-mask-image:#fff;

Xem JSFiddle này ... http://jsfiddle.net/hqLkA/

Ở đây nhìn vào cách tôi thực hiện nó; Jsfiddle

Với Mã tôi đã đặt, tôi đã quản lý để nó hoạt động trên Webkit (Chrome / Safari) và Firefox. Tôi không biết nếu nó hoạt động với phiên bản Opera mới nhất. Có, nó hoạt động theo phiên bản mới nhất của Opera.

#wrapper {
  width: 300px; height: 300px;
  border-radius: 100px;
  overflow: hidden;
  position: absolute; /* this breaks the overflow:hidden in Chrome/Opera */
}

#box {
  width: 300px; height: 300px;
  background-color: #cde;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
}

Tôi đã thử mọi câu trả lời nhưng không thành công. Sau vài giờ điều tra tôi đã tìm ra giải pháp cho vấn đề này. Sử dụng các thuộc tính này trong lớp của bạn sẽ không cho phép các phần tử div tràn vào vùng chứa.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

Nếu bạn đang tìm cách tạo mặt nạ cho hình ảnh và định vị hình ảnh bên trong vùng chứa, đừng đặt thuộc tính 'location: perfect'. Tất cả bạn phải làm là thay đổi lề trái và lề phải. Chrome / Opera sẽ tuân thủ quy tắc tràn: quy tắc ẩn và bán kính đường viền.

// Breaks in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            position: absolute;
            left: 20px;
            right: 20px;
        }
    }

// Works in Chrome/Opera.
    .container {
        overflow: hidden;
        border-radius: 50%;
        img {
            margin-left: 20px;
            margin-right: 20px;
        }
    }