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

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 15: Kỹ thuật ClearFix trong CSS

Trong bài tìm hiểu thuộc tính float thì mình có sử dụng sơ qua về kỹ thuật ClearFix này rồi nhưng không chi tiết lắm, vì vậy trong bài này mình sẽ ...

Trịnh Tiến Mạnh viết 09:49 ngày 03/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