Thuộc tính shape-outside

Thuộc tính shape-outside cho phép thiết lập các hình dạng bao quanh không chuẩn cho các phần tử float. Các phần tử lân cận sẽ bao quanh hình dạng được chỉ định, chứ không phải hộp chứa hình chữ nhật.

Cú pháp

cssbộ chọn {
  shape-outside: giá trị;
}

Giá trị

Ví dụ

Chúng ta tạo hình dạng bao quanh dạng tròn cho phần tử float. Sử dụng các thuộc tính shape-outside và clip-path:

html<div class="shape"></div>
<p>
  some long text
</p>

css.shape {
  width: 150px;
  height: 150px;
  float: left;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  background: #3498db;
}

p {
  width: 500px;
  text-align: justify;
}

Результат:

Ví dụ

Thiết lập khoảng cách thông qua thuộc tính shape-margin:

html<div class="shape"></div>
<p>
  some long text
</p>

css.shape {
  width: 150px;
  height: 150px;
  float: left;
  shape-outside: circle(50%);
  shape-margin: 10px;
  clip-path: circle(50%);
  background: #3498db;
}

p {
  width: 500px;
  text-align: justify;
}

Результат:

Ví dụ

Nếu không có thuộc tính clip-path, văn bản sẽ bao quanh hình tròn, nhưng bản thân phần tử sẽ không có hình dạng tròn:

html<div class="shape"></div>
<p>
  some long text
</p>

css.shape {
  width: 150px;
  height: 150px;
  float: left;
  shape-outside: circle(50%);
  background: #3498db;
}

p {
  width: 500px;
  text-align: justify;
}

Результат:

Ví dụ

Một hình dạng phần tử khác:

html<div class="shape"></div>
<p>
  some long text
</p>

css.shape {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  float: left;
  shape-outside: polygon(0% 0%, 100% 50%, 0% 100%);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
  margin-right: 20px;
  margin-bottom: 20px;
}

p {
  width: 500px;
  text-align: justify;
}

Результат:

Ví dụ

Một hình dạng phần tử khác:

html<div class="shape"></div>
<p>
  some long text
</p>

css.shape {
  width: 200px;
  height: 200px;
  background-color: #4CAF50;
  float: left;
  shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  margin-right: 20px;
  margin-bottom: 20px;
}

p {
  width: 500px;
  text-align: justify;
}

Результат:

Xem thêm