CSS shape-outside প্রতিশব্দ

Definition and Usage

shape-outside The attribute allows you to define the wrapping shape for inline content. By default, inline content is wrapped around its margin box, and using shape-outside, you can customize this wrapping style.

shape-outside The attribute defines the floating area of the floating element. This floating area defines the shape around which the inline content floating element is wrapped.

Example

Make inline content wrap around the image in a circular shape:

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

Try it yourself

CSS Syntax

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

Attribute value

Value Description
none Default. The floating area is not affected. Inline content is wrapped around the margin box of the element.
margin-box Define the shape surrounded by the margin edge outside.
border-box Define the shape surrounded by the border edge outside.
padding-box Define the shape surrounded by the padding edge outside.
content-box

Define the shape surrounded by the content edge.

Each corner radius of this box is 0 or the larger value of border-radius - border-width - padding.
basic-shape The floating area is based on the shape defined by the inset(), circle(), ellipse(), or polygon() functions.
url(image) The floating area is based on the alpha channel of the specified image, defined by shape-image-threshold.
initial Set this property to its default value. See initial。
inherit Inherit this property from its parent element. See inherit。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: none
পুনর্বহূক্তি: no
অ্যানিমেশন প্রস্তুতি: yes for basic-shape. Read about animatable
সংস্করণ: CSS Shapes Module Level 1
জেভাস্ক্রিপ্ট গঠন: object.style.shapeOutside="circle(50%)"

ব্রাউজার সমর্থন

টেবিলের সংখ্যা প্রথম এই বৈশিষ্ট্যকে সম্পূর্ণরূপে সমর্থনকারী ব্রাউজার সংস্করণকে দিয়ে নির্দেশ করে。

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
37 79 62 10.1 24