خصائص shape-outside CSS

تعريف ووظيفة

shape-outside الخصائص تسمح لك بتعريف شكل الحشو للمحتوى السريع. بشكل افتراضي، يتم حشو المحتوى السريع حول صندوق الهوامش، ولكن باستخدام shape-outside، يمكنك تخصيص هذا النوع من الحشو.

shape-outside تعريف الخاصية يحدد منطقة العائمة للعنصر العائم. تعريف هذه المنطقة العائمة يحدد الشكل الذي يتم حشو المحتوى السريع حول العنصر العائم.

مثال

اجعل المحتوى السريع يدور حول الصورة بالدائرة:

img {
  float: left;
  clip-path: دائرة(40%);
  shape-outside: دائرة(45%);
}

جرب بنفسك

نحو CSS

shape-outside: none|margin-box|border-box|padding-box|content-box|basic-shape|url(picture)|initial|inherit;

قيمة الخاصية

القيمة الوصف
لا شيء القيمة الافتراضية. مناطق العائمة لا تتأثر. يتم حشو المحتوى السريع حول صندوق الهوامش الخارجي للعنصر.
صندوق الهوامش الخارجية يحدد هذا الشكل الذي تحده حواف الهوامش الخارجية.
صندوق الحواف يحدد هذا الشكل الذي تحده حواف الحواف.
صندوق الهوامش يحدد هذا الشكل الذي تحده حواف الهوامش الداخلية.
صندوق المحتوى

يحدد هذا الشكل الذي تحده حواف المحتوى.

قطر الزوايا لهذا المربع هو 0 أو أكبر قيمة بين border-radius وborder-width وpadding.
الشكل الأساسي منطقة العائمة تعتمد على شكل inset() أو دائرة() أو ellipsis() أو polygon().
url(صورة) منطقة العائمة تعتمد على قناة الألفا للصورة المحددة، ويحددها shape-image-threshold.
القيمة الافتراضية أعط هذا الخصائص قيمته الافتراضية. راجع القيمة الافتراضية.
التوريث ينتقل هذا الخصائص من عنصر الأب. راجع التوريث.

تفاصيل التقنية

القيمة الافتراضية: لا شيء
التوريث: لا
صنع الأنيمات: نعم للشكل الأساسي. اقرأ عن animatable
الإصدار: مستوى 1 لمodule CSS Shapes
جافا سكربت النحو: object.style.shapeOutside="دائرة(50%)"

دعم المتصفح

الرقم في الجدول يعكس إصدار المتصفح الذي يدعم هذه الخاصية بشكل كامل.

كروم إيدج فايرفوكس سفاري أوبرا
37 79 62 10.1 24