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 ...

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-awidth 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

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-awidth: 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-awidth: 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-awidth: 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> 

Kết quả là:

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 code24h.com:

Bài liên quan

Tìm hiểu về border trong CSS

Trong bài này mình sẽ hướng dẫn các bạn cách sử dụng thuộc tính border trong CSS , đây là thuộc tính giúp thiết lập đường viền cho các ...

Hoàng Hải Đăng viết 15:20 ngày 24/01/2019

Thuộc tính Border trong CSS

Thuộc tính CSS border cho phép bạn chỉ định kiểu, chiều rộng và màu sắc của đường viền của phần tử. Định dạng Border Thuộc tính border-style chỉ định loại đường biên nào để hiển thị. Có thể sử dụng các giá trị sau: dotted – xác định một đường chấm chấm ...

Trần Trung Dũng viết 14:34 ngày 07/09/2018

Các thuộc tính định dạng ĐƯỜNG VIỀN (Border) trong CSS

Thuộc tính border dùng để định dạng đường viền cho phần tử HTML. Dưới đây là một số thuộc tính border: border-style (Thiết lập kiểu đường viền) border-awidth (Thiết lập độ dày của đường viền) border-color (Thiết lập màu của đường viền) Thiết lập kiểu đường viền Thuộc tính ...

Bùi Văn Nam viết 10:44 ngày 18/08/2018

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 ...

Hoàng Hải Đăng viết 12:23 ngày 14/08/2018

Bài 13: Thuộc tính z-index trong CSS

HTML là một định dạng đặc biệt của XML nên nó có đầy đủ các tính chất của XML như: Mỗi thẻ đều có thể có node con, mỗi thẻ đều có các thuộc tính ...

Tạ Quốc Bảo viết 09:47 ngày 03/08/2018
0