دائرة نصف قطرها الحدود Webkit في بعض الأحيان

Question

هذه المشكلة تدور حول خاصية Radius CDS3 (http://www.css3.info/border-radius-apple-vs-mozilla/)

مثال على هذه المشكلة هنا:

http://jamtodaycdn.appspot.com/bin/rounded.html.

في عنوان URL هذا، قمت بتقريب Divs التي يبدو أنها تقريب في FF3، ولكن في رحلات السفاري والكروم الزوايا الدائرية ليست موجودة.

النمط كما يلي:

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;

أنا متأكد إلى حد ما أن يتم تنسيق CSS بشكل صحيح، لذلك أنا جاهل فيما يتعلق بالمشكلة.

Answer 1

يبدو أن المشكلة في راديا 92px. يبدو وكأنه الحد الأقصى من دائرة نصف قطرها أن DIV العالي 20 بكسل يمكن أن يتعامل مع 18 بكسل. ليس من الواضح بالضرورة ما يعنيه نصف قطرها 92 بكسل في هذه الحالة. ومع ذلك، يمكنك تحديد نصف دائرة نصف قطرها X و Y باستخدام شيء مثل هذا:

-webkit-border-bottom-right-radius: 92px 18px;

(ملاحظة جانبية، يجب أن لا تستخدم نفس المعرف لعناصر HTML متعددة. يجب عليك استخدام الفئة بدلا من ذلك، وضبط محدد CSS الخاص بك حتى يقول. Round بدلا من #round.)

Answer 2

لأي شخص يشير إلى ذلك للمساعدة في الزوايا الدائرية، وأنا أتفق مع إجابة يعقوب فيما يتعلق ب WebKit، لكن السؤال المذكور أيضا Chrome لا يعمل. يستخدم Chrome زوايا مدورة CSS3 القياسية التي تعجبك بالضبط WebKit، ولكن دون سابق "-Webkit-" على القاعدة. هذه هي كما يلي:

border-bottom-right-radius:2px;

لأخذ في الاعتبار Firefox و WebKit و Chrome، كنت بحاجة إلى القيام بشيء مثل هذا:

-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;

المجموعة الثالثة من القواعد هي قواعد CSS3 ودعمتها Chrome. هذه طريقة جيدة أيضا للحصول على زوايا مدورة في IE باستخدام شيء مثل CSS3Pie: http://css3pie.com/

Answer 3

لا تحتاج إلى تطبيق خاصية حدودية أو عرض الحدود بالإضافة إلى خصائص نصف قطر الحدود المختلفة؟

أيضا، لاحظت Safari إسقاط دائرة نصف قطرها فوق بعض قيم نصف قطرها - حاول تقليل قيم البكسل ومعرفة ما يحدث.

Answer 4

نوع بسيط فقط استخدم:

border-radius:92px 92px 2px 2px;

أين:

border-radius:top right bottom left;