CSS3 - Hình ảnh đường viền

Thuộc tính CSS Border image được sử dụng để thêm hình ảnh boarder vào một số phần tử. Bạn không cần sử dụng bất kỳ mã HTML nào để gọi ảnh boarder. Cú pháp mẫu của ảnh boarder như sau:

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

Các giá trị thường được sử dụng nhất được hiển thị bên dưới:

Sr.No. Giá trị & Mô tả
1

border-image-source

Được sử dụng để đặt đường dẫn hình ảnh

2

border-image-slice

Được sử dụng để cắt hình ảnh nội trú

3

border-image-width

Được sử dụng để đặt chiều rộng hình ảnh nội trú

4

border-image-repeat

Được sử dụng để đặt hình ảnh nội trú làm tròn, lặp lại và kéo dài

Thí dụ

Sau đây là ví dụ minh họa cách đặt hình ảnh làm đường viền cho các phần tử.

<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">This is image boarder example.</p>
      <p id = "borderimg2">This is image boarder example.</p>
      <p id = "borderimg3">This is image boarder example.</p>
   </body>
</html>

Nó sẽ tạo ra kết quả sau: