[html] كيفية جعل الزوايا المستديرة CSS3 إخفاء تجاوز في كروم / أوبرا
أضف فهرس z إلى عنصر border-radius'd ، وسوف يخفي الأشياء داخله.
أحتاج إلى زوايا دائرية في قسم الوالدين لإخفاء المحتوى من الأطفال. overflow: hidden أعمال overflow: hidden في مواقف بسيطة ، ولكن انقطاع في المستعرضات المستندة إلى webkit وأوبرا عند وضع الوالد بشكل نسبي أو مطلق.
هذا يعمل في فايرفوكس و 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>
شكرا للمساعدة!
تحديث: تم إصلاح الخطأ الذي تسبب في هذه المشكلة منذ ذلك الحين في Chrome. أنا لم أعيد اختبار أوبرا أو Safari ومع ذلك.
ليست إجابة ، ولكن هذا خطأ تم تقديمه بموجب مصدر Chromium: http://code.google.com/p/chromium/issues/detail?id=62363
للأسف ، لا يبدو أن هناك أي شخص يعمل على ذلك. :(
التعتيم: 0.99؛ على المجمع حل علة webkit
إذا كنت تبحث لإنشاء قناع لصورة ووضع الصورة داخل الحاوية لا تقم بتعيين سمة "الموضع: مطلق". كل ما عليك فعله هو تغيير الهامش الأيسر والهامش الأيمن. ستلتزم 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;
}
}
تغيير عتامة العنصر الرئيسي مع الحد وسيؤدي ذلك إلى إعادة تنظيم العناصر المجمعة. هذا عمل بأعجوبة بالنسبة لي بعد ساعات من البحث والمحاولات الفاشلة. كانت بسيطة مثل إضافة تعتيم من 0.99 لإعادة تنظيم عملية الطلاء هذه من المتصفحات. تحقق من http://philipwalton.com/articles/what-no-one-told-you-about-z-index/
بالنسبة لي ، فإن أيًا من الحلول لم تنجح ، فقط باستخدام:
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
على عنصر المجمع قام بهذه المهمة.
هنا المثال: http://jsfiddle.net/gpawlik/qWdf6/74/
html 
css