Tạo khung-Bo góc-Đổ bóng cho ảnh

Thủ thuật này giúp ta tạo đường viền,bo góc và tạo bóng đổ cho ảnh cộng với hiệu ứng khi rê chuột vào ảnh.

Thủ thuật có thể áp dụng cho toàn blog hoặc một bài đăng bất kỳ. Nếu áp dụng cho toàn blog ta dán đoạn CSS sẽ trình bầy sau đây trước thẻ ]]></b:skin> Còn chỉ dùng cho 1 bài đăng ta đặt đoạn CSS đó trong thẻ <style type="text/css">Đoạn CSS</style> bên soạn thảo HTML sau đó post ảnh như bình thường.

Sau đây là DEMO để các bạn xem thử.Các bạn rê chuột vào ảnh sẽ thấy hiệu ứng

Sau đây là đoạn CSS dùng cho thủ thuật trên:

.post img {Thuộc tính cần thêm vào}/* Hiệu ứng ảnh khi chưa rê chuột*/
.post img:hover{Thuộc tính cần thêm vào}/* Hiệu ứng ảnh khi rê chuột*/

Ta có thể sử dụng các thuộc tính sau:
+ Background: #F8F7F1: Màu khoảng cách giữa mép ảnh và đường viền

+ border:1 px dash  #FFFFFF: Đường viền
- 1px: Độ dày đường viền.
- Dash: Kiểu đường viền, bao gồm các dạng: dotted, dashed, solid, double, groove, ridge, inset, outset.
- #FFFFFF: Màu đường viền

+ box-shadow:2px 2px 2px 3px #333 inset: bóng đổ
- 2px: bóng đổ về phía phải (giá trị âm sẽ đổ về phía trái)
- 2px: bóng đổ về phía dưới (giá trị âm sẽ đổ về phía trên)
- 2px: là độ nhòe của bóng.
- 3px: độ lan tỏa của bóng.
- #333: màu của bóng đổ.
- inset: bóng đổ chìm vào trong (nếu muốn làm khối nổi thì bỏ cái này)

+ border-radius: 5px 5px 5px 5px;
- 5px: góc trên bên trái.
- 5px: góc trên bên phải
- 5px: góc dưới bên phải
- 5px: góc dưới bên trái
Muốn bo đều 4 góc thì bạn có thể rút gọn thành
+ border-radius: 5px.
+ padding: 10px: Khoảng cách giữa mép ảnh và đường viền.
Lưu ý: Mỗi thuộc tính cách nhau bới dấu ;