ویژگی shape-outside CSS
- صفحه قبل scrollbar-color
- صفحه بعدی @starting-style
تعریف و استفاده
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 |
- صفحه قبل scrollbar-color
- صفحه بعدی @starting-style