Làm thế nào để tạo đường viền ảnh lặp lại trong CSS3 - núm vú

Một trong những cách sử dụng phổ biến nhất cho hình ảnh lặp đi lặp lại trong CSS3 là tạo ra các đường viền được làm bằng hình ảnh. Thật không may, kỹ thuật này không hoạt động tốt với Internet Explorer 9. Tuy nhiên, nó hoạt động với tất cả các phiên bản Chrome, Firefox và Internet Explorer 10. Các thủ tục sau đây sẽ lấy mẫu SimpleGraphics được tạo ra trước đó và thêm một đường viền với nó.

1. Mở SimpleGraphics. Tệp HTML.

   Bạn cần phải sửa đổi trang để có một cái mới để giữ margin, mà thực sự không phải là một phần của hình ảnh. Nếu bạn cố gắn đồ họa lề vào vùng chứa ảnh hiện có, đồ họa sẽ xuất hiện ở giữa của lề của vùng chứa hình ảnh chứ không phải là hình ảnh đầy đủ.

2. Thêm mới vào trang như được hiển thị ở đây.

   
   Một bức tranh của một con mèo dễ thương!
   
   
   
   
   
   
   
   

3. Sửa đổi thẻ để trông như thế này:

4. Lưu tệp HTML dưới dạng BorderGraphics. HTML.

5. Mở SimpleGraphics. Tệp CSS.

   Bạn cần thay đổi các kiểu để chúng sẽ làm việc với các vùng chứa mới tìm thấy trong tệp HTML. Hãy suy nghĩ về biên giới là một hộp bao gồm một hộp giữ hình ảnh và chú thích. Những gì bạn nhận được thay vì một hộp hình ảnh duy nhất là một hộp trong một hộp.

6. Thêm một kiểu mới #BorderContainer như kiểu được hiển thị ở đây.

   #BorderContainer {border-style: solid; chiều rộng biên giới: 20px; border-image: url (PawPrint.gif) 25 22 23 làm tròn; padding: 24px; phao: trái; vị trí: tuyệt đối; chiều cao: 465px; chiều rộng: 440px; trái: 50%; margin-left: -244px;}
   

   Hầu hết các thuộc tính này giống như các thuộc tính ban đầu được sử dụng cho kiểu #ImageContainer. BorderContainer bây giờ là vùng chứa bên ngoài, do đó bạn định vị nó hơn là ImageContainer. Có một số thay đổi trong các phép đo để phù hợp với kích thước của đường biên.

   Sự thay đổi lớn nhất là việc bổ sung thuộc tính border-image. Bạn cung cấp URL của hình ảnh bạn muốn sử dụng cùng với độ lệch phía trong của hình ảnh đường biên, độ rộng của hình ảnh và hình ảnh ban đầu.

   Giá trị điền cho trình duyệt điền vào các bản sao của hình ảnh và giá trị tròn cho trình duyệt để thay đổi kích thước hình ảnh sao cho số lượng hình ảnh còn đầy.

   Việc tìm ra các con số cho hình ảnh đường biên có thể khó khăn và mất nhiều thời gian. May mắn thay, bạn có thể sử dụng máy tạo hình border-image để làm việc cho bạn. Đơn giản chỉ cần cung cấp vị trí của hình ảnh đường biên bạn muốn sử dụng và sau đó sử dụng các thanh trượt để tìm ra các giá trị tối ưu để đặt hình ảnh đó xung quanh a. Bạn có thể sao chép các kết quả trực tiếp từ trang tới ứng dụng của bạn.

7. Sửa đổi kiểu #ImageContainer để nó phản ánh vai trò mới của nó như là một thùng chứa bên trong.

   #ImageContainer {margin: 20px; chiều cao: 420px; chiều rộng: 400px; background-color: White;}
   

8. Lưu tệp CSS dưới dạng BorderGraphics. CSS.

9. Tải trang BorderGraphics.

   Bạn thấy trang. Chú ý rằng các đồ họa biên giới bao quanh cả hình ảnh và chú thích của nó.