ویژگی shape-outside CSS

تعریف و استفاده

shape-outside این ویژگی به شما اجازه می‌دهد که شکل محصور شده محتوای درون‌خطی را تعریف کنید. به عنوان پیش‌فرض، محتوای درون‌خطی به دور جعبه حاشیه‌ای خود محصور می‌شود، و با استفاده از shape-outside، شما می‌توانید این روش محصور شدن را شخصی‌سازی کنید.

shape-outside این ویژگی تعریف می‌کند که منطقه شناور یک عنصر شناور است. این منطقه شناور تعریف می‌کند شکل محصور شده توسط محتوای درون‌خطی شناور.

مثال

گذارید محتوای درون‌خطی به دور تصویر به شکل دایره‌ای محصور شود:

img {
  float: left;
  clip-path: circle(40%);
  shape-outside: circle(45%);
}

آزمایش کنید

نوع CSS

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

مقدار ویژگی

مقدار توضیح
هیچ‌یک مقدار پیش‌فرض. منطقه شناور تحت تأثیر قرار نمی‌گیرد. محتوای درون‌خطی به دور جعبه حاشیه‌ای عناصر محصور می‌شود.
margin-box تعریف شکل محصور شده توسط لبه‌های بیرونی حاشیه اضافی.
border-box تعریف شکل محصور شده توسط لبه‌های بیرونی حاشیه.
padding-box تعریف شکل محصور شده توسط لبه‌های بیرونی پدینگ.
content-box

تعریف شکل محصور شده توسط لبه‌های محتوای آن.

رادیوس هر گوشه این جعبه به مقدار 0 یا بزرگترین مقدار بین border-radius - border-width - padding است.
basic-shape منطقه شناور بر اساس شکل‌های تعریف شده توسط توابع inset()، circle()، ellipse() یا polygon() است.
url(تصویر) منطقه شناور بر اساس کانال آلفای تصویر مشخص شده است، که توسط shape-image-threshold تعریف شده است.
مقدار اولیه این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به مستند مراجعه کنید مقدار اولیه.
وراثت این ویژگی از ویژگی پدر خود ارث می‌برد. به مستند مراجعه کنید وراثت.

جزئیات فنی

مقدار پیش‌فرض: هیچ‌یک
وراثت: خیر
تولید انیمیشن: بله برای basic-shape. بخوانید در مورد animatable
نسخه: مستند CSS Shapes Module Level 1
نوع جاوااسکریپت: object.style.shapeOutside="circle(50%)"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه مرورگر اولین هستند که این ویژگی را کامل پشتیبانی می‌کند.

کروم ایج فایرفاکس سفاری آپرا
37 79 62 10.1 24