ویژگی shape-outside در CSS

shape-outside Property

ویژگی shape-outside در CSS فرمی را مشخص می کند که متن در کنار عنصر مورد نظر، در فرم دلخواه قرار گیرد. این فرم می تواند چهار گوش نباشد و به اشکال دلخواهِ چند ضلعی و یا دایره یا بیضی نیز باشند.

نحوه نوشتار

shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(5em 10rem 8% 10px);
shape-outside: polygon(2em 2em, 2em 2em, 3em 3em);

shape-outside: url(shape.png);

shape-outside: linear-gradient(55deg, rgba(255, 255, 255, 0) 150px, red 150px);

مقادیر

none​

متن کنار عنصر بدون تغییر در حالت پیشفرض دیده می شود.

margin-box​

شکل را چسبیده به لبه بیرونی margin مشخص می کند.

border-box​​

شکل را چسبیده به لبه بیرونی border مشخص می کند.

padding-box​

شکل را چشبیده به لبه بیرونی padding در اطراف عنصر مشخص می کند.

content-box​

شکل را چسبیده به لبه بیرونی محتوا مشخص می کند.

اشکال هدنسی

شکل جایگیری محتوا منطبق بر یکی از توابع inset(), circle(), ellipse(),  polygon() که برای رسم اشکال هندسی استفاده می شوند مشخص می شود.

در مثال زیر نحوه عملکرد این ویژگی را می بینیم:

html

<div class="wrapper">
     <img src="http://my-project.ir/img/cup.png" alt="cup" />
     <p>
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک
        برای صفحه‌آرایی، نخست از متن‌های آزمایشی و بی‌معنی استفاده می‌کنند تا
        صرفا به مشتری یا صاحب کار خود نشان دهند که صفحه طراحی یا صفحه بندی شده
        بعد از اینکه متن در آن قرار گیرد چگونه به نظر می‌رسد و قلم‌ها و
        اندازه‌بندی‌ها چگونه در نظر گرفته شده‌است.
     </p>
</div>

css

 body {
    background-color: rgb(199, 228, 240); 
}
.wrapper {
    float: right;
    max-width: 620px;
}
img {
    float: right;
    shape-outside: circle(50%);
    margin: 15px;
}
p {
    direction: rtl;
    text-align: justify;
    font-family: "Segoe UI";
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی در CSS پشتیبانی می کنند.