Các shape-outsidekiểm soát bất động sản như thế nào nội dung sẽ quấn quanh bounding-box một yếu tố nổi của. Thông thường, điều này là để văn bản có thể chỉnh sửa lại trên một hình dạng chẳng hạn như hình tròn, hình elip hoặc đa giác:
.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )
Điều quan trọng cần lưu ý là thuộc tính này sẽ chỉ hoạt động trên các phần tử nổi hiện tại, mặc dù điều này có thể sẽ thay đổi trong tương lai. Các shape-outsidebất động sản cũng có thể được thao tác với các chuyển động hoặc hình ảnh động.
Giá trị
circle(): để tạo hình tròn.ellipse(): để tạo hình elip.inset(): để tạo hình chữ nhật.polygon(): để tạo bất kỳ hình dạng nào có 3 đỉnh trở lên.url(): xác định hình ảnh nào nên được sử dụng để bao quanh văn bản.initial: khu vực phao không bị ảnh hưởng.inherit: kế thừashape-outsidegiá trị từ cha.
Các giá trị sau xác định tham chiếu nào của mô hình hộp nên được sử dụng để định vị hình dạng bên trong:
margin-boxpadding-boxborder-box
Những giá trị này nên được gắn vào phía sau, ví dụ: shape-outside: circle(50% at 0 0) padding-box. Theo mặc định, margin-boxtham chiếu sẽ được sử dụng.
hình elip ()
.element ( shape-outside: ellipse(150px 300px at 50% 50%); )Các ellipse()chức năng đòi hỏi các giá trị bán kính cho x, y trục của elip tiếp theo là tọa độ vị trí trung tâm của hình dạng trong khung giới hạn của nó. Ví dụ, ví dụ trên sẽ định vị tâm của hình elip ở tâm dọc và ngang của .elementdiv:
Mặc dù bản trình diễn ở trên có thể gợi ý rằng chúng tôi đang thay đổi hình dạng của divchính nó, nếu chúng tôi thêm đường viền và hình nền, chúng tôi sẽ thấy rằng hộp giới hạn trên thực tế vẫn là hình chữ nhật:
Có thể tốt hơn nếu nghĩ về nó theo cách này: với thuộc shape-outsidetính, chúng ta đang thay đổi mối quan hệ của các phần tử khác xung quanh một phần tử, chứ không phải hình học của chính phần tử đó. Để khắc phục điều đó, chúng tôi sẽ cần sử dụng shape-outsidecùng với thuộc clip-path()tính, chẳng hạn như trong ví dụ này:
vòng tròn()
.element ( shape-outside: circle(50%); )Hàm này tạo ra một hình tròn và trong ví dụ mã ở trên, nó sẽ tạo một hình tròn có bán kính bằng một nửa chiều cao và chiều rộng của .element. Các circle()chức năng cũng có thể sử dụng cú pháp tương tự cho vị trí hình dạng bên trong.
url ()
.element ( shape-outside: url('circle.png.webp'); )Trong trường hợp này, chúng ta có hai hình ảnh nổi, một hình ở hai bên của khối văn bản. Vì cả hai hình ảnh đều có thuộc shape-outsidetính được đặt nên văn bản bên dưới sẽ tránh hai phần nổi đó.
Cũng có thể đặt thuộc shape-image-thresholdtính sẽ thông báo cho trình duyệt biết những pixel nào, tùy thuộc vào độ trong suốt của chúng, sẽ tạo ra hình dạng. Ví dụ:
.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )Trong ví dụ này, các pixel duy nhất sẽ tạo ra hình dạng phải có độ trong suốt từ 50% trở lên. Các giá trị từ 0.0(trong suốt) đến 1.0(không trong suốt) là hợp lệ.
đa giác ()
.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )Hàm này tạo bất kỳ hình dạng nào có ba đỉnh trở lên, ví dụ:
Điều quan trọng cần lưu ý là nếu thuộc tính này sẽ được chuyển động, nó yêu cầu cùng một số đỉnh khi bạn khai báo trạng thái hoạt hình:
.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )inset ()
.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )inset()là một hàm để tạo hình chữ nhật, nó có năm tham số nhưng thứ năm, for border-radiuslà tùy chọn. Các đối số khác là hiệu số vào trong so với cạnh của .element:
Ở trên chúng ta có một phần tử có chiều rộng 200px x chiều cao 200px và chúng ta đang bù đắp hình dạng trong phạm vi thành 50px theo mọi hướng ngoại trừ phía bên trái. Bằng cách này, văn bản sẽ bao bọc bên trên hình dạng mặc dù div kéo dài đến đầu.
Hỗ trợ trình duyệt
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 37 | 62 | Không | 79 | 7.1 * |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | số 8* |