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