Biên giới - Thủ thuật CSS

Các border-boundarybất động sản trong những hạn chế CSS thiết lập để giới hạn của một yếu tố có ảnh hưởng đến cách biên giới của phần tử hành xử. Nó được định nghĩa trong thông số kỹ thuật CSS Round Display Level 1, hiện đang ở trạng thái Đang làm việc nháp. Điều đó có nghĩa là mọi thứ có thể thay đổi giữa bây giờ và đề xuất ứng viên chính thức.

.element ( border-boundary: display; /* sets the boundary to the screen display */ )

Thực tế là thuộc tính này nằm trong đặc tả CSS Round Display đã cho bạn biết nó giỏi gì: tạo giao diện hình tròn. Cụ thể hơn, border-boundarynằm trong phần “Vẽ đường viền xung quanh đường viền hiển thị”, đây là một manh mối khác cho thấy nó hoạt động tốt: cho phép đường viền của phần tử tôn trọng đường biên tròn của giao diện hình tròn.

Hãy tưởng tượng, nếu bạn muốn, một chiếc đồng hồ thông minh với màn hình tròn. Giả sử màn hình đó là hình vuông 150px. Và trong đó là một hộp màu cam có cùng kích thước.

Không có gì, điên rồ, phải không? Hộp màu cam phù hợp với màn hình tròn vì nó tràn ra các cạnh, bị ẩn đi. Nhưng hãy xem điều gì sẽ xảy ra khi một đường viền được thêm vào hộp…

Hmm, không quá tuyệt. Một lần nữa, các cạnh của hộp tràn ra màn hình tròn, vì vậy đường viền của chúng ta sẽ bị cắt bớt trong quá trình này.

Đó là nơi border-boundaryphù hợp với bức tranh. Thêm nó vào hộp với giá trị là displaycho phép đường viền của hộp theo hình tròn của màn hình. Vì hỗ trợ trình duyệt của nơi nghỉ này chính xác là zilch tại thời điểm này, hãy cho phép tôi cung cấp hình ảnh mô phỏng về kết quả dự kiến.

Thấy chưa? Đường viền tôn trọng hình dạng tròn của màn hình, giúp nó không bị cắt.

Bạn có thể tưởng tượng điều này có thể hữu ích như thế nào khi thiết kế đồng hồ có giao diện. Nhóm công tác CSS đã biên soạn một danh sách các trường hợp sử dụng border-boundarycó thể thực sự hữu ích.

Cú pháp

border-boundary: none | parent | display;

Giá trị ban đầu: none
Áp dụng cho: tất cả các phần tử
Kế thừa: có
Phần trăm: n / a
Giá trị tính toán: như đã chỉ định
Loại hoạt ảnh: rời rạc

Giá trị

none: không có ranh giới nào được thiết lập trên biên giới.
parent: thiết lập ranh giới nơi vùng của phần tử và các cạnh biên giới của phần tử gốc gặp nhau.
display: đặt ranh giới nơi vùng của phần tử và các cạnh biên giới của khung nhìn gặp nhau.