Các thuộc tính liên quan đến ảnh

Ngày đăng: 22/10/2018 - Cập nhật: 22/10/2018

Mục Lục

Kích thước của hình ảnh
Tạo đường viền xung quanh các phần tử
Tạo bo góc đường viền với border-radius
Tạo hình ảnh tròn với thuộc tính border-radius

Kích thước của hình ảnh

CSS có một thuộc tính được gọi là width kiểm soát chiều rộng của phần tử. Cũng giống như với phông chữ, chúng tôi sẽ sử dụng px (pixel) để chỉ định chiều rộng của hình ảnh.

Ví dụ: Nếu chúng ta muốn tạo class có tên là larger-image cung cấp cho các phần tử HTML có chiều rộng 500 pixel, chúng ta sẽ sử dụng:

            <style>
  .larger-imag {
    width: 500px;
  }
</style>

Bài tập: Tạo một class có tên là smaller-image và sử dụng nó để thay đổi kích thước hình ảnh con mèo sao cho nó chỉ rộng 100 pixel.

Lưu ý: Do sự khác biệt về trình duyệt cách hiển thị cũng có thể sẽ khác nhau.

Tạo đường viền xung quanh các phần tử

Đường viền CSS có các thuộc tính như kiểu, màu và chiều rộng.
Ví dụ: Nếu chúng ta muốn tạo đường viền màu đỏ, đường viền rộng 5 pixel xung quanh một phần tử HTML, chúng tôi có thể sử dụng class này:

            <style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>

Hoặc

            <style>
  .thin-red-border {
    border: 5px solid red;
  }
</style>

Tạo một class có tên là thick-green-border. Lớp này sẽ thêm một đường viền màu xanh lá cây, dầy 10px, nét liền (solid) xung quanh một phần tử HTML.

Áp dụng class này cho ảnh con mèo của bạn. Hãy nhớ rằng bạn có thể áp dụng nhiều lớp cho một phần tử bằng cách sử dụng thuộc tính class của nó, bằng cách tách từng tên class với một dấu cách. Ví dụ:

            <img class="class1 class2">

Tạo bo góc đường viền với border-radius

Ảnh con mèo của bạn hiện có các góc sắc nét. Chúng ta có thể làm tròn những góc đó bằng thuộc tính CSS được gọi là border-radius
Ví dụ:

            border-radius: 10px;

Bạn có thể chỉ định bán kính đường viền bằng pixel.

Bài tập: Hãy bo góc khung hình ảnh con mèo của bạn bán kính bo là 10px.

Gợi ý: bạn có thể thêm thuộc tính vào trong class thick-green-border hoặc smaller-image để áp dụng bo góc lên khung hình ảnh con mèo của bạn

Tạo hình ảnh tròn với thuộc tính border-radius

Ngoài pixel, bạn cũng có thể chỉ định giá trị của border-radius bằng phần trăm (%).

Bài tập: Cung cấp cho ảnh con mèo của bạn một border-radius là 50%.

Về trang trước Bài tiếp theo

Gửi email in trang