วิธีทำให้ CSS3 ปัดเศษมุมซ่อนเร้นใน Chrome / Opera

ฉันต้องการมุมโค้งมนบน div parent เพื่อปกปิดเนื้อหาจาก childen ของมัน overflow: hiddenทำงานได้ในสถานการณ์ที่เรียบง่าย แต่หยุดพักในเบราว์เซอร์ที่ใช้ webkit และ Opera เมื่อผู้ปกครองอยู่ในตำแหน่งที่ค่อนข้างหรือแน่นอน

ใช้งานได้ใน Firefox และ 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>

ตัวอย่างบน JSFiddle

ขอบคุณสำหรับความช่วยเหลือ!

อัปเดต:ข้อผิดพลาดที่ทำให้เกิดปัญหานี้ได้รับการแก้ไขตั้งแต่ใน Chrome ฉันยังไม่ได้ทดสอบ Opera หรือ Safari อีกครั้ง

ฉันพบวิธีแก้ไขปัญหาอื่นสำหรับปัญหานี้ นี่ดูเหมือนข้อผิดพลาดอื่นใน WebKit (หรืออาจเป็น Chrome) แต่ก็ใช้งานได้ สิ่งที่คุณต้องทำ - คือการเพิ่มWebKit CSS Maskให้กับองค์ประกอบ #wrapper คุณสามารถใช้รูปภาพ png พิกเซลเดียวและรวมไว้ใน CSS เพื่อบันทึกคำขอ 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;
}​

ตัวอย่าง JSFiddle

เพิ่มดัชนี z ลงในรายการ border-radius'd ของคุณและมันจะปกปิดสิ่งที่อยู่ภายใน

ไม่ต้องห่วงทุกคนฉันจัดการแก้ไขปัญหาด้วยการเพิ่ม div เพิ่มเติมระหว่าง wrapper และ box

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>

ขอบคุณทุกคนที่ช่วย!

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

ความทึบ: 0.99; บน wrapper แก้ข้อผิดพลาด webkit

ดูเหมือนว่างานนี้:

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

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

รองรับ Chrome, Opera และ Safari ล่าสุดคุณสามารถทำสิ่งนี้ได้:

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

คุณควรตรวจสอบเครื่องมือhttp://bennettfeely.com/clippy/ !

ไม่ใช่คำตอบ แต่เป็นข้อบกพร่องที่ถูกจัดเก็บไว้ใต้แหล่ง Chromium: http://code.google.com/p/chromium/issues/detail?id=62363

น่าเสียดายที่ดูเหมือนว่าไม่มีใครทำงานอยู่ :(

เปลี่ยนความทึบขององค์ประกอบพาเรนต์ด้วยเส้นขอบและสิ่งนี้จะจัดระเบียบองค์ประกอบที่ซ้อนกันอีกครั้ง สิ่งนี้ได้ผลอย่างน่าอัศจรรย์สำหรับฉันหลังจากชั่วโมงการวิจัยและความพยายามที่ล้มเหลว มันง่ายเหมือนการเพิ่มความทึบของ 0.99 อีกครั้งเพื่อจัดระเบียบกระบวนการทาสีของเบราว์เซอร์ ตรวจสอบhttp://philipwalton.com/articles/what-no-one-told-you-about-z-index/

สำหรับฉันไม่มีวิธีแก้ปัญหาทำงานได้ดีเพียงใช้:

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

ในองค์ประกอบ wrapper ทำงาน

นี่คือตัวอย่าง: http://jsfiddle.net/gpawlik/qWdf6/74/

ตามคำตอบที่ดีของ graycrow ...

นี่คือตัวอย่างโลกแห่งความเป็นจริงที่มี div cicular สองตัวที่มีเนื้อหาตัวเติม ฉันเปลี่ยนพื้นหลัง png ที่เขียนโค้ดยากด้วยค่าฐานสิบหกเช่น

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

ถูกแทนที่ด้วย

-webkit-mask-image:#fff;

ดู JSFiddle นี้ ... http://jsfiddle.net/hqLkA/

ดูที่ฉันทำมัน; Jsfiddle

ด้วยรหัสที่ฉันใส่ฉันจัดการเพื่อให้มันทำงานบน Webkit (Chrome / Safari) และ Firefox ฉันไม่รู้ว่ามันใช้งานได้กับ Opera เวอร์ชันล่าสุดหรือไม่ ใช่มันทำงานภายใต้ 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;
}

ฉันลองทุกคำตอบ แต่ไม่ประสบความสำเร็จ หลังจากตรวจสอบไม่กี่ชั่วโมงฉันพบวิธีแก้ปัญหานี้ การใช้คุณสมบัตินี้ในคลาสของคุณจะไม่อนุญาตให้องค์ประกอบ div ล้นคอนเทนเนอร์

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

หากคุณต้องการสร้างมาสก์สำหรับรูปภาพและจัดวางรูปภาพภายในคอนเทนเนอร์ไม่ได้ตั้งค่าแอตทริบิวต์ 'position: absolute' สิ่งที่คุณต้องทำคือเปลี่ยนระยะขอบซ้ายและระยะขอบขวา Chrome / Opera จะปฏิบัติตามกฎมากเกินไป: กฎซ่อนเร้นและเส้นขอบรัศมี

// 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;
        }
    }