Đóng khung bài viết blogspot - nâng cao

Ở bài viết "Đóng khung cho bài viết blogspot" mình đã hướng dẫn các bạn bước cơ bản để tạo khung cho bài viết. Nhưng khung bài viết chỉ là khung vuông và màu thì cũng hơi đơn điệu. Vì thế hôm nay mình hướng dẫn thêm các bạn tùy biến cho khung để đẹp hơn.

Cấu trúc thẻ đóng khung như bài trước ta đã biết, đó là:

<div style="Thuộc tính của khung">
Bài viết
</div>

Thuộc tính của khung thì có nhiều thuộc tính, để các bạn dễ nhớ và không bị choáng ngợp, hôm nay mình giới thiệu 2 thuộc tính để trang trí. đó là:
- Border-radius: bo tròn cạnh của khung.
- Box-shadow: Đổ bóng cho khung.

Border-radius: Bo góc cho bài viết hay đoạn bài viết

Mẫu:

<div style="border:2px solid green;padding:10px;border-radius:15px;"> Bài viết</div>

Khi bạn thêm thuộc tính border-radius:15px khung của bạn sẽ được bo tròn 4 góc với góc lượn 15px. Bạn có thể thay đổi thông số 15 bằng số bất kỳ để thấy sự thay đổi của viền bo và chọn thông số phù hợp với thẩm mỹ của bạn.

Ngoài ra bạn có thể bo tròn từng góc của khung nếu bạn muốn bằng cách sử dụng các câu lệnh:

- border-top-left-radius: Bo tròn góc trên bên trái.

- border-top-right-radius: Bo tròn góc trên bên phải.

- border-bottom-left-radius: Bo tròn góc dưới bên trái.

- border-bottom-right-radius: Bo tròn góc dưới bên phải.

Box-shadow: Đổ bóng cho khung

Mẫu:

<div style="border:2px solid green;padding:10px;border-radius:15px;box-shadow: 5px 5px 5px green;">Bài viết </div>

Khi bạn thêm thuộc tính box-shadow khung của bạn sẽ được đổ bóng giống như trên.

Các giá trị 5px 5px 5px green lần lượt là: kích thước bóng ở vị trí bên phải khung (nếu bạn muốn bóng bên trái thêm dấu - thành -5px), kích thước bóng vị trí dưới khung ( nếu muốn bóng vị trí trên khung bạn thêm dấu -), Độ nhòe bóng (tham số càng cao độ nhòe càng lớn), màu bóng ( bạn có thể chọn màu bất kỳ)