html,body { margin:0px; padding:0px; } .bgs0 { background:linear-gradient(to left,#ABDCFF,#0396FF); } .bgs1 { background:linear-gradient(to left,#E2B0FF,#9F44D3); } .bgs2 { background:linear-gradient(to left,#FEB692,#0396FF); } .bgs3 { background:linear-gradient(to left,#CE9FFC,#7367F0); } .bgs4 { background:linear-gradient(to left,#90F7EC,#32CCBC); } .bgs5 { background:linear-gradient(to left,#FFF6B7,#F6416C); } .bgs6 { background:linear-gradient(to left,#81FBB8,#28C76F); } .bgs7 { background:linear-gradient(to left,#FEB692,#EA5455); } .bgs8 { background:linear-gradient(to right,#ffe985,#e2b0ff); } .bgs9 { background:linear-gradient(to left,#FFE985,#FA742B); } .bgs10 { background:linear-gradient(to left,#3C8CE7,#00EAFF); } #conter { margin:50px auto; width:650px; height:650px; } #bg { position:relative; width:650px; height:650px; background-size:cover; } .dsplay-style { width:65px; height:65px; left:585px; bottom:325px; position:absolute; border-radius:8px; transform:scale(0.95); border:1px solid rgba(255,255,255,0.9); font-size:60px; line-height:65px; cursor:pointer; text-align:center; color:rgb(255,255,255); background-size:cover; transition:all 0.1s ease 0s; } #fenshuq { position:relative; width:200px; height:650px; left:-210px; top:-650px; } #guanshu { position:absolute; top:0px; width:200px; height:200px; box-sizing:border-box; border:10px solid #fff; font-size:140px; text-align:center; border-radius:50%; color:#fff; } #gs { position:absolute; top:220px; width:200px; height:60px; box-sizing:border-box; border:10px solid #fff; border-radius:8px; font-size:20px; line-height:35px; text-align:center; color:#fff; } #fs { position:absolute; top:300px; width:200px; height:60px; box-sizing:border-box; border:10px solid #fff; border-radius:8px; font-size:20px; line-height:35px; text-align:center; color:#fff; } #ks { position:absolute; top:380px; width:200px; height:60px; box-sizing:border-box; border:10px solid #fff; border-radius:8px; font-size:20px; line-height:35px; text-align:center; color:#fff; }