CSS shape-outside کئیتی

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

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

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

مثال

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

img {
  float: چپ;
  clip-path: دایره(40%);
  shape-outside: دایره(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 منطقه شناور بر اساس شکل‌های تعریف شده توسط functions inset()، circle()، ellipse() یا polygon() است.
url(تصویر) منطقه شناور بر اساس کانال آلفای تصویر مشخص شده است، که توسط shape-image-threshold تعریف شده است.
مقدار اولیه این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به مستندات مراجعه کنید مقدار اولیه.
وراثت این ویژگی را از عنصر والد خود ارث می‌برد. به مستندات مراجعه کنید وراثت.

جزئیات فنی

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

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

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

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