HTML/CSS Hướng dẫn Wordpress

Tổng hợp code đường viền khung trang trí cho website

Viết bởi Tiến Đức

Cho các bạn muốn “mỳ ăn liền” trang trí cho website của mình, code dạng HTML nên có thể dùng cho blogger, wordpress nên các bạn không phải lo về vấn đề hiển thị hay tương thích nhé.
Nếu bạn muốn hiểu rõ hơn về những đoạn code trong bài này bạn có thể tham khảo bài …. trong Series học CSS, bạn có thể thỏa thích sáng tạo trang trí cho website theo ý thích.

<div style=”padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

<div style=”padding: 8px; border: 2px dotted #FF69B4; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

<div style=”padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

<div style=”padding: 8px; border: 6px double #8A2BE2; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

<div style=”padding: 8px; border: 10px groove salmon; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

<div style=”padding: 8px; border: 10px ridge salmon; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

<div style=”padding: 8px; border: 10px inset #8FBC8F; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

<div style=”padding: 8px; border: 10px outset #8FBC8F; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Cái khung này được kết hợp từ 3 loại đường viền: outset, groove và inset

<div style=”border-radius: 25px; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;”>CHÈN NỘI DUNG VÀO ĐÂY</div>

Nếu bạn muốn hiểu rõ hơn và muốn sáng tạo theo cách cá nhân hóa thì có thể tham khảo bài này nhé: CSS Border 

Sending
User Review
0 (0 votes)

Về tác giả

Tiến Đức

3 Bình luận

Gửi phản hồi

%d bloggers like this: