Hàm số CSS inset()

Định nghĩa và cách sử dụng

CSS của inset() Hàm số định nghĩa một hình vuông, hình vuông này giữ khoảng cách nội bộ xác định với mỗi cạnh của khung tham chiếu.

inset() Hàm số thường được sử dụng cùng với clip-path Thuộc tính và shape-outside Sử dụng cùng nhau.

Thực例

Ví dụ 1

Cắt hai phần tử <div> thành hình vuông có khoảng cách nội bộ xác định với mỗi cạnh của khung tham chiếu:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(15px);
}
#pinkDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: pink;
  clip-path: inset(5% 10% 15% 10% round 20px);
}

Thử ngay

Ví dụ 2

Sử dụng clip-path và inset() Thực hiện hiệu ứng hoạt hình:

#myDIV {
  width: 100px;
  height: 100px;
  background-color: coral;
  color: green;
  animation: mymove 5s infinite;
  clip-path: inset(10% round 20px);
}
@keyframes mymove {
  50% {clip-path: inset(50% round 50px);}
}

Thử ngay

Ví dụ 3

sử dụng cùng nhau inset()、clip-path và shape-outside:

#blueDIV {
  float: left;
  width: 150px;
  height: 100px;
  background-color: lightblue;
  clip-path: inset(45px 50px 15px 0 round 50px);
  shape-outside: inset(40px 40px 10px 0 round 50px);
}

Thử ngay

Ngữ pháp CSS

inset(length-percentage round border-radius)

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng biểu thị phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn hàm số này.

Trang liên quan

Tham khảo:Thuộc tính clip-path CSS

Tham khảo:Thuộc tính shape-outside trong CSS

Tham khảo:Hàm số CSS circle()

Tham khảo:Hàm ellipse() CSS

Tham khảo:Hàm polygon() CSS