Mẫu kết quả code khung

Code

Nội dung code copy
( 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: 3%; font-family: Courier New; font-size: 16px; word-break: break-word; color: black; line-height:20px; background-position: center; background-repeat: no-repeat; background-size: cover; “>

<div id=”Vien” style=”border: solid 4px transparent; border-radius: 5px; background-image: linear-gradient(100deg,transparent,white), radial-gradient(circle at top left, #ffe1e1,#847cf7), radial-gradient(circle at top left, #ffe1e1,#847cf7); background-origin: border-box; background-clip: content-box, border-box;”>

<div id=”NEN-MO” style=”background: padding: 3%;margin: 10px;”>

<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 ý theo px
• background-image:  chỉnh sửa các số sau # theo màu bạn muốn – đây là phần đổ màu garident – thậm chí bạn có thể thêm 2,3 màu vào trong này ~

  • Ví dụ: background-image: linear-gradient(100deg,transparent,white), radial-gradient(circle at top left,#ffcfcf,white,white,#3f36b7 ); 

• background-image:
• background-origin: border-box;- phải có
• background-clip: content-box, border-box;;  – phải có
• 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