Top 6 đoạn code tạo khung text mẫu HTML CSS đẹp

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>

.box {
  border: 1px solid black;
  padding: 10px;
}

Khung text có góc bo tròn

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>

.box {
  border-radius: 5px;
  border: 1px solid black;
  padding: 10px;
}

Khung text có màu nền

<div class="box">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>

.box {
  background-color: #f0f8ff;
  border: 1px solid black;
  padding: 10px;
}

Khung text có chiều rộng và chiều cao cố định

<div class="box" style="width: 200px; height: 100px;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>

.box {
  border: 1px solid black;
  padding: 10px;
}

Khung text có vị trí cố định

<div class="box" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>

.box {
  border: 1px solid black;
  padding: 10px;
}

Khung text có hiệu ứng chuyển động

<div class="box" style="transition: all 0.5s;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac ultricies magna.</p>
</div>

.box {
  border: 1px solid black;
  padding: 10px;
}

.box:hover {
  background-color: #ffffff;
}

Câu hỏi thường gặp (FAQs)

1. Làm cách nào để thêm màu sắc khác vào các khung văn bản này?
   • Bạn có thể thay đổi giá trị background-color trong mã CSS để thay đổi màu nền.
2. Tôi có thể thay đổi kích thước của các khung văn bản này không?
   • Đúng vậy, bạn có thể sử dụng thuộc tính width và height trong CSS để điều chỉnh kích thước của chúng.
3. Làm thế nào để tạo một khung văn bản với nhiều hiệu ứng cùng lúc?
   • Bạn có thể kết hợp các lớp CSS khác nhau trên cùng một phần tử HTML để kết hợp nhiều hiệu ứng lại với nhau.
4. Có cách nào để làm cho khung văn bản thay đổi màu khi người dùng di chuyển chuột qua nó không?
   • Bạn có thể sử dụng CSS :hover để định rõ các hiệu ứng khi người dùng di chuột qua khung văn bản.
5. Tôi cần thêm các hình ảnh vào khung văn bản. Làm cách nào để làm điều đó?
   • Bạn có thể thêm các thẻ <img> vào bên trong các khung văn bản để hiển thị hình ảnh.