CSS shapes

Module CSS shapes mô tả các hình học hình học. Nó cũng định nghĩa các thuộc tính CSS có thể sử dụng các shape để kiểm soát vùng float của phần tử; vùng này sau đó có thể được áp dụng cho exclusion hoặc xác định vùng nội dung của phần tử.

Đặc tả định nghĩa nhiều cách khác nhau để tạo shape. Nội dung có thể bao quanh hoặc nằm bên trong một shape thay vì tuân theo hình chữ nhật mặc định của hộp phần tử.

Shape định nghĩa các hình học có thể được sử dụng làm giá trị CSS. Module này cung cấp các hàm để tạo hình ellipse, đa giác và các hình học tùy ý. Các module CSS khác có thể sử dụng các shape được định nghĩa trong đặc tả này, bao gồm CSS motion path và CSS masking.

CSS shapes thực tế

Ví dụ dưới đây hiển thị một hình ảnh được float trái và áp dụng thuộc tính shape-outside với giá trị circle(50%). Điều này tạo ra hình tròn, và nội dung bao quanh float giờ sẽ bao quanh hình đó. Điều này thay đổi độ dài của các line box văn bản bao quanh. Bạn có thể nhấn "Play" để chỉnh sửa mã trong MDN Playground.

<div class="box">
  <img
    alt="A hot air balloon"
    src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery. Before that night—a memorable night,
    as it was to prove—hundreds of millions of people had watched the rising
    smoke-wreaths of their fires without drawing any special inspiration from
    the fact.
  </p>
</div>

body {
  font: 1.2em / 1.5 sans-serif;
}
img {
  float: left;
  shape-outside: circle(50%);
}

<basic-shape>

Hàm

Thuật ngữ

Reference box

Hướng dẫn

Overview of shapes: Định nghĩa các basic shape bằng thuộc tính shape-margin và clip-path, và debug basic shape bằng Developer Tools.
Shapes from box values: Sử dụng độ cong border-radius và các giá trị box model CSS để tạo shape.
Basic shapes with shape-outside: Tạo hình chữ nhật, hình tròn, hình ellipse và đa giác bằng CSS shapes, reference box và thuộc tính shape-outside.
Shapes from images: Tạo shape từ các tệp hình ảnh bán trong suốt và CSS Gradient.