Dành cho những bạn đã có hiểu sơ sơ về việc viết code viền nhé,
đây coi như là nâng cao nghen
Có điều : border-radius: không áp dụng được vào khung viền này nghen
Nếu ai chưa biết cách code khung thì xem thêm ở đây nghen 👇
Chi tiết code tạo khung
Kết quả
Nội dung bên trong
Code
Nội dung code
( copy vào file Txt để copy lại vào web không bị lỗi nha )
<div id=”Background” style=”background: url(‘ link-anh‘ ); padding: 2%; font-family: Courier New; font-size: 16px; word-break: break-word; color: black; “>
<div id=”Vien” style=”border: 5px solid; border-image-source: linear-gradient(-45deg, #C60A0A, #760A0A); border-image-slice: 1; padding: 5px;”>
<div id=”NEN-MO” style=”background: rgba(255,255,255,0.93); padding: 3%; text-align: left; background-position: center; background-repeat: no-repeat; background-size: cover;”>
<h2 style=”font-family: Lobster; text-align: center;”>Nhà list các Danh sách đề cử:</h2>
<p> nội dung code</p>
</div>
</div>
</div>
Giải thích cơ bản
- id=”Background“, id=”Vien“, id=”NEN-MO“: dùng để đánh dấu thôi
- link-anh: thay link ảnh vào đây để set background
- font-family: thích thêm thì thêm, không thì bỏ cũng được
- border: điều chỉnh độ dày viền tùy ý
- border-image-source: chỉnh sửa các số # theo màu bạn muốn – đây là phần đổ màu garident
- border-image-slice: 1; – luôn cần
- Cụm : background-position: center; background-repeat: no-repeat; background-size: cover; –> Dùng để nền không bị repest – dùng cho các nền to / đơn giản – nếu không sẽ vỡ ảnh nếu nội dung bên trong quá to