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

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

Giá trị

Giá trị	Mô tả
`circle()`	Hình dạng bao quanh dạng tròn
`ellipse()`	Hình dạng bao quanh dạng elip
`polygon()`	Hình dạng đa giác tùy ý
`url()`	Hình dạng dựa trên kênh alpha của hình ảnh
`margin-box`	Sử dụng đường viền margin (giá trị mặc định)

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:

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

.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:

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

.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:

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

.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:

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

.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:

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

.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

thuộc tính clip-path,
tạo hình dạng hiển thị cho phần tử
thuộc tính float,
cần thiết để shape-outside hoạt động
thuộc tính shape-margin,
thêm khoảng cách xung quanh hình dạng