Border Image trong CSS

Thuộc tính Border Image trong CSS được sử dụng để thêm hình ảnh xuất hiện trên đường viền cho các phần tử. Bạn không cần sử dụng bất cứ HTML code nào để gọi Border Image. Cú pháp đơn giản cho Border Image như sau:

#borderimg {
   border: 10px solid transparent;
   padding: 15px;
}

Dưới đây là một số giá trị được sử dụng chủ yếu:

Giá trị	Miêu tả
border-image-source	Thiết lập đường dẫn tới vị trí bạn lưu giữ hình ảnh
border-image-slice	Được sử dụng để cắt Border Image thành các miếng mỏng
border-image-width	Thiết lập độ rộng cho Border Image
border-image-repeat	Nhận các giá trị round, repeat hoặc stretch để tạo hiệu quả tương ứng cho Border Image

Quảng cáo

Ví dụ

Ví dụ dưới đây minh họa cách thiết lập một hình ảnh thành Border cho các phần tử bởi sử dụng các giá trị trên.

<html>
   <head>
   
      <style>
         #borderimg1 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(../css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 10px;
         }
         #borderimg2 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(../css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 20px;
         }
         #borderimg3 { 
            border: 10px solid transparent;
            padding: 15px;
            border-image-source: url(../css/images/border.png);
            border-image-repeat: round;
            border-image-slice: 30;
            border-image-width: 30px;
         }
      </style>
      
   </head>
   <body>
      <p id="borderimg1">Vi du ve thuoc tinh border-image trong CSS.</p>
      <p id="borderimg2">Vi du ve thuoc tinh border-image trong CSS.</p>
      <p id="borderimg3">Vi du ve thuoc tinh border-image trong CSS.</p>
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: