Làm thế nào để tạo ra một biên giới xung quanh một hình ảnh trong CSS3 - núm vú

Một trong những thay đổi phổ biến hơn bạn có thể làm cho một hình ảnh trong CSS3 là thêm một biên giới. Thao tác này sẽ tắt hình ảnh từ các nội dung khác trên trang. Tất nhiên, CSS3 cung cấp một loạt các loại biên giới. Bí quyết là để có được biên giới để hiển thị xung quanh hình ảnh theo cách mà bạn có thể thực hiện các nhiệm vụ khác với đường biên giới đó sau đó.

Đó là nơi mà trong mã HTML đi vào chơi. Nó cung cấp một vùng chứa có thể chứa tất cả các loại sự vật (chẳng hạn như được sử dụng như một vùng chứa cho thẻ

được hiển thị trong ví dụ trước đó) - và bạn có thể tương tác với vùng chứa đó bằng nhiều cách khác nhau. Thủ tục sau đây sẽ giúp bạn thêm một đường viền quanh hình ảnh.

1. Tạo một tệp CSS mới với trình soạn thảo văn bản của bạn.

   Trình biên tập của bạn có thể không hỗ trợ tệp CSS. Bất kỳ tập tin văn bản sẽ làm.

2. Gõ thông tin kiểu CSS sau đây.

   #ImageContainer {border-style: groove; chiều rộng biên giới: dày; đường viền màu xám; đệm: 5px; float: left;}
   

   Phần lớn thông tin kiểu này là về biên giới. Thêm padding vào biên giới làm cho nó dính ra giống như một khung. Giá trị phao giữ khoảng xung quanh hình ảnh, thay vì phải làm theo phía bên phải của trình duyệt, khi người dùng thay đổi kích thước cửa sổ trình duyệt.

   Nếu bạn muốn hình ảnh ở phía bên phải của trang, thay vì trái, thay thế phao: phải;. Toàn bộ vùng chứa, hình ảnh được bao gồm, sẽ nằm ở phía bên phải của trang, chứ không phải bên trái. Khi người dùng thay đổi cửa sổ trình duyệt, hình ảnh sẽ vẫn có cùng kích thước, nhưng nó sẽ di chuyển với phía bên phải của cửa sổ trình duyệt.

3. Lưu tệp dưới dạng SimpleGraphics. CSS.

4. Thêm mã sau vào vùng của tệp HTML.

   Mã này tạo liên kết giữa tệp HTML và tệp CSS.

5. Lưu tệp HTML và tải lại trang.

   Bạn thấy đường biên.