Thuộc tính shape-outside trong CSS

Định nghĩa và cách sử dụng

shape-outside Thuộc tính cho phép bạn định nghĩa hình dạng bao bọc cho nội dung trong dòng. Mặc định, nội dung trong dòng bao quanh khung viền ngoài của nó, và sử dụng shape-outsideBạn có thể tùy chỉnh cách bao bọc này.

shape-outside Thuộc tính này định nghĩa khu vực nổi của phần tử nổi. Khu vực nổi này định nghĩa hình dạng mà nội dung nổi bao quanh.

Mô hình

Hãy để nội dung trong dòng bao quanh hình ảnh theo hình tròn:

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

Thử ngay

Ngôn ngữ CSS

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

Giá trị thuộc tính

Giá trị Mô tả
none Giá trị mặc định. Khu vực nổi không bị ảnh hưởng. Nội dung trong dòng bao quanh khung viền ngoài của phần tử.
margin-box Định nghĩa hình dạng được bao quanh bởi cạnh viền ngoài của margin.
border-box Định nghĩa hình dạng được bao quanh bởi cạnh viền ngoài của border.
padding-box Định nghĩa hình dạng được bao quanh bởi cạnh viền ngoài của padding.
content-box

Định nghĩa hình dạng được bao quanh bởi cạnh nội dung.

Mỗi góc của khung này có bán kính là 0 hoặc giá trị lớn nhất giữa border-radius - border-width - padding.
basic-shape Khu vực nổi dựa trên hình dạng của hàm inset(), circle(), ellipse() hoặc polygon().
url(image) Khu vực nổi dựa trên alpha channel của hình ảnh được chỉ định, được định nghĩa bởi shape-image-threshold.
initial Đặt thuộc tính này về giá trị mặc định. Xem initial。
inherit Tiếp nhận thuộc tính này từ phần tử cha. Xem inherit。

Chi tiết kỹ thuật

Giá trị mặc định: none
Kế thừa: Không
Chế tạo animation: Có cho basic-shape. Đọc về animatable
Phiên bản: Mô đun CSS Shapes Cấp 1
Ngôn ngữ lập trình JavaScript: object.style.shapeOutside="circle(50%)"

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
37 79 62 10.1 24