Hình dạng kiểu tạp chí xung quanh các phần tử nổi trong CSS Với hình dạng bên ngoài

Một phần của mô-đun CSS Shapes 1 , hình dạng bên ngoài là một thuộc tính thú vị giúp bạn dễ dàng cài đặt hình dạng cho gói văn bản xung quanh một phần tử nổi. Ví dụ: nếu phần tử nổi là một hình ảnh có nhiều khoảng trắng hoặc nếu nó có bán kính đường viền khác, thì giá trị của shape-ngoài sẽ phát huy tác dụng để xác định cách văn bản bao quanh nó.

Sử dụng hình dạng bên ngoài cho phép tạo bố cục trang tiếp cận những bố cục mà ta thường thấy trên tạp chí. Nó có thể là một cải tiến tiến bộ tốt đẹp cho các trình duyệt hỗ trợ và trong các trình duyệt không hỗ trợ, thuộc tính này đơn giản bị bỏ qua.

Giá trị cho hình dạng bên ngoài có thể là một từ khóa, một hàm hình dạng hoặc một URL đến một hình ảnh. Hãy khám phá từng tùy chọn một cách ngắn gọn:

Từ khóa hình dạng

Bạn có thể đặt shape-ngoài thành một giá trị như margin-box , padding-box , content-box hoặc border-box . Điều này giúp dễ dàng có văn bản tuân theo giá trị bán kính đường viền được áp dụng cho phần tử nổi:

hộp lề
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tính khí nóng nảy của loài Phesiaesque faucibus euismod. Ut ac gia vị neque. Vivamus vel tristique lacus. Aenean volutpat volutpat diam, eu volutpat mauris. Donec interdum tempor risus. Maecenas eu tincidunt tra tấn. Donec tincidunt turpis enim, ac bibendum lorem nhạt nhẽo tại. Pastyesque ullamcorper ex sit amet mauris dictum varius.

img.shape1 {   float: left;   margin-right: 2rem;   border-radius: 0% 90%;   -webkit-shape-outside: margin-box;   shape-outside: margin-box; }

Sự khác biệt giữa các từ khóa margin , padding , content và border là ở nơi trình duyệt đặt “ranh giới” của hình dạng. Ví dụ: cài đặt border-box sẽ buộc văn bản chảy chính xác xung quanh mép ngoài của border của phần tử.

Chức năng hình dạng

shape-ngoài cũng có thể nhận một trong bốn hàm hình dạng có thể có: circle () , polygon () , ellipse () hoặc inset () .

Vòng tròn

Dưới đây là một ví dụ với một hình ảnh bị trôi sang bên trái và có bán kính đường viền là 50% :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non arcu num lacus venenatis pulvinar. Cras lacinia turpis diam, ở euismod velit auctor sed. Curabitur bibendum sodales aimor et lobortis. Cras vitae vulputate ex. Vivamus trong faucibus mi. Aliquam auctor sem ac lobortis volutpat. Integer fringilla lacus suscipit nisl blandit, sed efficitur elit ultricies. Curabitur ac laoreet ligula. Nullam et enim ut risus tempor hàng hóa. Vivamus dictum ngồi amet erat vitae dapibus.

img.shape2 {   float: left;   margin-right: 2rem;   border-radius: 50%;   -webkit-shape-outside: circle();   shape-outside: circle(); }

Hàm shape circle () cũng có thể lấy giá trị bán kính và vị trí:

/* Circle width a 40% radius and positioned at 20% 60% */ shape-outside: circle(40% at 20% 60%);

Hình elip

Trong trường hợp của hàm shape ellipse () , cú pháp tương tự như hàm circle, ngoại trừ bán kính X và bán kính Y được cung cấp:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam dolor, pulvinar et odio eu, accumsan malesuada augue. Donec luctus et neque n dignissim. Phasellus varius ex sit amet ipsum gravida, at tincidunt neque luctus. Proin moltie, risus eu interdum bibendum, mauris urna laoreet nisi, trong eleifend eros arcu trong elit. Xongc không hoàn chỉnh dignissim erat et semper. Maecenas vestibulum tempor neque id pastyesque. Aenean vel justo maximus metus rutrum accumsan ac a dolor. Vivamus a nunc non elit luctus ornare pretium id risus. Nunc diam sapien, varius sit amet accumsan sit amet, malesuada quis diam. Donec gia vị odio eu ex pretium FOOTI. Phasellus ligula enim, pulvinar sit amet efficitur vitae, sodales at elit. Donec sagittis arcu trong cây cà gai leo. Maecenasectorsula hendrerit lacus at ornare. Suspendisse mattis ac mauris eu auctor. Nulla eu ipsum a lectus posuere aliquam id id est.

.shape3 {   float: right;   width: 230px;   height: 140px;   margin-left: 2rem;   border-radius: 50%;   -webkit-shape-outside: ellipse(100px 55px at 38.7% 52.25%);   shape-outside: ellipse(100px 55px at 38.7% 52.25%);   object-fit: cover; }

Ở đây, ta cũng đã sử dụng đối tượng-fit đảm bảo rằng hình ảnh giữ được tỷ lệ co của nó mặc dù ta đã thu nhỏ kích thước.

Đa giác

Bạn có thể tạo tất cả các loại hình dạng thú vị bằng cách sử dụng chức năng màu polygon () . Tuy nhiên, khá phức tạp để tìm ra độ sáng thích hợp, vì vậy đối với các hình dạng phức tạp hơn, bạn có thể cần sử dụng một công cụ như Tiện ích mở rộng Chrome CSS Shapes Editor tuyệt vời này.

img.shape4 {   float: left;   -webkit-shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);   shape-outside: polygon(-5px 86px, 243px 253px, 300px 220px, 296px 434px, -2px 434px);   -webkit-shape-margin: .7rem;   shape-margin: .7rem; }

Ở đây lưu ý việc sử dụng thuộc tính shape-margin để di chuyển nhẹ toàn bộ hình dạng.

Inset

Với hàm hình dạng inset () , bạn đã chứng minh các giá trị chèn cho các vị trí trên cùng, bên phải, bên dưới và bên trái:

img.shape5 {   float: right;   -webkit-shape-outside: inset(50px 0 50px 55px);   shape-outside: inset(50px 0 50px 55px); }

URL

Ta có thể cung cấp hình ảnh qua URL và các phần mờ của hình ảnh sẽ tạo ra hình dạng:

img.shape6 {   float: left;   shape-outside: url("/shape.png"); }

Đây là hình ảnh png ( shape.png ) trong suốt của ta trông như thế nào:

Hình dạng

Khả năng tương thích của trình duyệt: Tính đến năm 2020, 94% trình duyệt trên toàn thế giới hỗ trợ thuộc tính shape-outside . Trình duyệt duy nhất hoàn toàn thiếu hỗ trợ là Internet Explorer 11.

Tags:

Các tin liên quan

image đường viền và đường viền Gradient trong CSS thuần túy
2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03