[Html] كيفية جعل الزوايا المستديرة CSS3 إخفاء تجاوز في كروم / أوبرا


Answers

أضف فهرس z إلى عنصر border-radius'd ، وسوف يخفي الأشياء داخله.

Question

أحتاج إلى زوايا دائرية في قسم الوالدين لإخفاء المحتوى من الأطفال. 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>

مثال على JSFiddle

شكرا للمساعدة!

تحديث: تم إصلاح الخطأ الذي تسبب في هذه المشكلة منذ ذلك الحين في Chrome. أنا لم أعيد اختبار أوبرا أو Safari ومع ذلك.




بالنسبة لي ، فإن أيًا من الحلول لم تنجح ، فقط باستخدام:

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

على عنصر المجمع قام بهذه المهمة.

هنا المثال: http://jsfiddle.net/gpawlik/qWdf6/74/







إذا كنت تبحث لإنشاء قناع لصورة ووضع الصورة داخل الحاوية لا تقم بتعيين سمة "الموضع: مطلق". كل ما عليك فعله هو تغيير الهامش الأيسر والهامش الأيمن. ستلتزم 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/




التعتيم: 0.99؛ على المجمع حل علة webkit