Trước khi đi vào chi tiết thì có 1 lưu ý (hơi thừa) với các bạn là phải dán code vào chế độ Văn bản (hay có mấy tên khác là chế độ Text hoặc chế độ HTML) của khung soạn thảo nhé Cho những bạn chưa biết thì nếu các bạn muốn dán code vào thanh bên thì widget cần sử dụng ở đây là widget Văn bản nhé

Giờ thì chính thức bắt đầu nào

1. Các code đường viền cơ bản

Trong phần này Sera sẽ giới thiệu đến các bạn 8 code đường viền cơ bản:

Dạng nét liền (solid)

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

Dạng dấu chấm (dotted)

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

Dạng nét đứt (dashed)

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

Dạng nét đôi (double)

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

Dạng đường rãnh (groove)

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

Dạng chóp (ridge)

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

Dạng đổ bóng bên trong (inset)

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

Dạng đổ bóng bên ngoài (outset)

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

Ngoài ra các bạn cũng có thể kết hợp các code đường viền ở trên thành những dạng đường viền hỗn hợp, ví dụ như thế này nè:

Hay cái này:

Cái khung này được Sera kết hợp từ 4 loại đường viền: solid, dashed, dotted và double

Hoặc có thể thêm thuộc tính border-radius để bo tròn 4 góc, ví dụ như thế này:

<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 nội dung trong khung quá dài, các bạn có thể dùng thuộc tính overflow kết hợp với max-height (hoặc height) để thu gọn lại (và sẽ xuất hiện thanh cuộn), ví dụ:

Code:

<div style="max-height: 150px; overflow: auto; padding: 8px; border: 2px solid #FF1493; word-wrap: break-word;">Bọn chúng hí hửng, hí hửng nhưng rồi hơi bực vì cả đêm chưa có chuyện gì xảy ra. Chỉ có muỗi đến gặm chúng tơi bời. Bọn muỗi trên đài ngắm sao, không thích lại gần Vạn Độc Vương đầy độc và Đông Tử nói chuyện rất sinh động tay chân, nên giữa tấn công một người hay động đậy và tấn công hai tên dị quái ngồi im như bữa ăn dọn sẵn thì bọn muỗi chọn cái thứ hai rồi. Hai dị quái cắn răng chịu cắn, đến gần sáng, mới thấy hai con người hay giả vờ kia xích lại nhau chút. Bọn chúng mở cờ trong bụng, cuối cùng thì công trình kiên nhẫn nhiều chuyện cũng được đền đáp. Vậy mà Tường Vy lại đùng đùng xuất hiện.</div>

Kết quả:

Bọn chúng hí hửng, hí hửng nhưng rồi hơi bực vì cả đêm chưa có chuyện gì xảy ra. Chỉ có muỗi đến gặm chúng tơi bời. Bọn muỗi trên đài ngắm sao, không thích lại gần Vạn Độc Vương đầy độc và Đông Tử nói chuyện rất sinh động tay chân, nên giữa tấn công một người hay động đậy và tấn công hai tên dị quái ngồi im như bữa ăn dọn sẵn thì bọn muỗi chọn cái thứ hai rồi. Hai dị quái cắn răng chịu cắn, đến gần sáng, mới thấy hai con người hay giả vờ kia xích lại nhau chút. Bọn chúng mở cờ trong bụng, cuối cùng thì công trình kiên nhẫn nhiều chuyện cũng được đền đáp. Vậy mà Tường Vy lại đùng đùng xuất hiện.

Chú ý chung:

Phần chữ màu đỏ là độ dày của đường viền

Phần chữ màu xanh lá là loại đường viền (solid, dotted, dashed,…)

Phần chữ màu hồng là màu đường viền, có thể sử dụng tên gọi của màu (red, black,…), mã màu hex (#ffffff, #ff0000,…) hoặc các loại mã màu khác để thay màu cho đường viền. Về phần mã màu hex thì các bạn có thể xem và lấy mã màu ở ĐÂY nhé

Ba thành phần này có thể đổi chỗ cho nhau, kết quả đều không thay đổi.

Có thể sử dụng các thẻ <div>, <p>, <span> tuỳ trường hợp, không nhất thiết phải dùng thẻ <div> như trong code mẫu.