Thuộc tính border-image trong CSS ban đầu hơi khó để bạn có thể hiểu được. Trong bài viết này, chúng ta sẽ thảo luận về thuộc tính border-image là gì, cách sử dụng nó và các đặc điểm riêng của nó khi sử dụng nó trong các trình duyệt khác nhau.
Tại thời điểm này trong chương trình đào tạo CSS của chúng ta, chúng ta phải biết thuộc tính đường viền là gì. Để làm mới, đó là một thuộc tính sử dụng tốc ký để chỉ định đường viền xung quanh một phần tử. Nó có cấu trúc sau:
border: 2px /*width*/ dashed /*style*/ green; /*color*/
Cũng giống như đường viền, thuộc tính hình ảnh đường viền là một thuộc tính viết tắt sử dụng hình ảnh nguồn để tạo đường viền xung quanh một phần tử. Nó có cấu trúc sau:
border-image:
url("https://www.placekitten.com/501/700") /*source*/
25% / /*slice*/
70px / /*width*/
2px /*outset*/
stretch; /*repeat*/ - border-image-source:
border-image-source là thuộc tính thủ công cho phần nguồn của thuộc tính border-image trong CSS. Nó lấy một url có đường dẫn tương đối hoặc url hình ảnh đến một hình ảnh thực tế hoặc là một số loại gradient
- viền-hình-lát:
thuộc tính border-image-slice là tên thuộc tính dài tay cho phần lát của thuộc tính border-image. Nó chia hình ảnh thành chín phần riêng biệt.
Theo mặc định, phần giữa được lấy ra để phần còn lại của hình ảnh có thể bao quanh phần tử bạn đang sử dụng thuộc tính. Thuộc tính border-image-Slice có thể sử dụng tối đa bốn số (tính bằng%) để chỉ định vị trí của các lát. Bạn cũng có thể sử dụng từ điền nếu bạn muốn sử dụng phần giữa đó.
- border-image-width:
Cũng giống như thuộc tính border-width, thuộc tính border-image-width cho biết bạn muốn hình ảnh đường viền của mình rộng bao nhiêu. Nó có thể sử dụng tỷ lệ phần trăm hoặc rems / ems / px và sử dụng tối đa bốn số để mỗi bên của đường viền có chiều rộng riêng.
- phần đầu của hình ảnh biên giới:
Thuộc tính border-image-outset đặt khoảng cách giữa đường viền hình ảnh so với hộp đường viền của phần tử. Xin nhắc lại, hộp viền là một phần của mô hình hộp - khu vực giữa phần đệm và lề. Con số càng cao thì nó càng cách xa hộp viền của nó. Cần tối đa bốn giá trị để mỗi bên có giá trị riêng nếu cần.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
- đường viền-hình ảnh-lặp lại:
Thuộc tính đường viền-hình ảnh-lặp lại đặt cách mỗi cạnh sẽ hoạt động (cạnh là mỗi cạnh không bao gồm các góc của hình ảnh). Nó cần đến hai giá trị. Khi một giá trị được chỉ định, nó áp dụng cho tất cả các cạnh và khi hai giá trị được chỉ định, giá trị đầu tiên áp dụng cho trên cùng và dưới cùng, trong khi giá trị thứ hai áp dụng cho bên trái và bên phải. Giá trị có thể là duỗi ra , lặp lại , vòng hoặc dấu cách .
Các câu hỏi về trình duyệt
Firefox và Safari là những trình duyệt phổ biến nhất cho phép bạn sử dụng từng thuộc tính riêng lẻ để tạo hình ảnh đường viền. Trong Chrome, bạn chỉ có thể sử dụng thuộc tính tốc ký - và bạn phải sử dụng nó cùng với kiểu biên giới thuộc tính sẽ cho chúng ta biết phần trên cùng của đường viền mà chúng ta muốn có (nét liền, nét đứt, v.v.). Hãy nhớ xem phần này nếu bạn đang sử dụng Chrome và nó không hoạt động bình thường đối với bạn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Border Image</title>
<style>
* {
box-sizing: border-box;
}
.flex {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 500px;
height: 300px;
margin: 20px;
}
.border-image-box {
/* Below only works in Firefox and Safari*/
border-image-source: url(https://placekitten.com/900/1000);
border-image-slice: 25%;
border-image-width: 70px;
border-image-outset: 2px;
border-image-repeat: round;
padding: 80px;
/* This way will NOT work in Chrome */
}
.border-image-shorthand {
border-style: solid;
border-image:
url(https://placekitten.com/900/1000)
25% /
70px /
2px
round;
padding: 80px;
/* Above works in all browsers. Firefox and Safari you can use the border-image prop without using the border-style property. In Chrome you MUST use the border-style prop in order for the image to show up on the webpage */
}
</style>
</head>
<body>
<div class="border-image-box flex">
This is a box. It's using each of the individual border-image
properties to style
</div>
<div class="border-image-shorthand flex">
This is a box. It's using the border-image shorthand to style
</div>
</body>
</html> Trong hướng dẫn này, chúng ta đã học cách sử dụng thuộc tính border-image để tạo đường viền hình ảnh CSS xung quanh một phần tử. Đây là một thuộc tính viết tắt bao gồm biên-hình-nguồn, biên-hình-cắt, biên-hình-chiều-rộng, biên-hình-ra-ngoài và biên-hình-lặp. Để làm cho điều này tương thích với tất cả các trình duyệt, hãy đặt kiểu đường viền thành đặc trước khi bạn chỉ định các giá trị đường viền.