43. Border Cho ảnh Trong CSS

Border cho ảnh trong CSS:

Để thêm viền cho một hình ảnh bằng CSS, bạn có thể sử dụng thuộc tính border. Điều này cho phép bạn tạo một đường viền xung quanh hình ảnh. Dưới đây là một ví dụ về cách sử dụng thuộc tính border để tạo viền cho hình ảnh:

css

.img-with-border {
  border: 2px solid #333; /* Độ dày 2px, loại solid, màu sắc #333 */
  padding: 5px; /* Tạo khoảng cách giữa viền và hình ảnh */
}

Trong ví dụ trên, chúng ta đã thêm một viền có độ dày 2px, loại solid (đường liền), và màu sắc là #333 cho hình ảnh. Các giá trị khác như dashed, dotted, double, vv. cũng có thể được sử dụng để định dạng viền theo cách khác nhau.

Sau khi bạn đã định dạng viền cho hình ảnh, bạn có thể áp dụng lớp CSS “img-with-border” cho phần tử <img> của bạn:

html

<!DOCTYPE html>
<html>
<head>
<style>
  .img-with-border {
    border: 2px solid #333;
    padding: 5px;
  }
</style>
</head>
<body>

<img src="your-image.jpg" alt="Hình ảnh có viền" class="img-with-border">

</body>
</html>

Hãy đảm bảo thay thế "your-image.jpg" bằng đường dẫn thực tế đến hình ảnh bạn muốn sử dụng.

Ngoài ra, bạn có thể tùy chỉnh các giá trị trong ví dụ trên (độ dày, loại viền, màu sắc, khoảng cách padding, vv.) để phù hợp với thiết kế của bạn.

Leave a Comment Cancel Reply