1. THỰC HÀNH
  2. Thao tác Images
  3. Đường viền hình ảnh

thực hành - tạo đường viền hình ảnh

Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo đường viền cho hình ảnh bằng CSS.

Đường viền hình ảnh

Sóng biển Núi tuyết

 

Xem kết quả

Cách tạo đường viền hình ảnh

Bước 1) Thêm HTML:

Ví dụ

<!-- Tạo vùng chứa hình ảnh -->
<div class="containerx">
    <img class="img" src="/images/picture_4.jpg" alt="Sóng biển" />
    <img class="img" src="/images/picture_3.jpg" alt="Núi tuyết" />
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho vùng chứa hình ảnh */
.containerx {
    width:100%;
    height:auto;    
}
/* Tạo kiểu cho hình ảnh */
.containerx .img {
    width:250px;
    margin:5px;
    border:8px solid #C90;    
}
/* Bo tròn góc đường viên */
.containerx .img:nth-child(2) {
    border-color:#3F6;
    border-radius:8px;    
}

Xem kết quả


  1. THỰC HÀNH
  2. Thao tác Images
  3. Đường viền hình ảnh


BÀI VIẾT LIÊN QUAN

BÀI VIẾT CHỦ ĐỀ KHÁC