@font-face { font-family: fzrzFont; /* 导入的字体文件 */ src: url("../../font/fzrzExtraBold.ttf"); } body { position: absolute; left: -8px; top: -8px; } .wrapper{ width: 1400px; position: relative; background-image: url('res/img/bk.jpg'); background-size: cover; font-family: 'cr105Font'; padding: 20px; } .title { font-size: 60px; font-family: 'fzrzFont'; /* margin-left: 40px; */ /* color: #F67186; */ background: linear-gradient(to right, #F67186, #F7889C); -webkit-background-clip: text; background-clip: text; color: transparent; text-align: center; } .main { background-image: url('res/img/main.png'); background-size: 100% 100%; /* background-size: cover; */ height: 100%; width: 1370px; position: relative; padding: 20px; /* box-shadow: 5px 5px 10px 0 rgba(0,0,0,0.5); */ } .items-border { display: flex; flex-wrap: wrap; padding-left: 18px; } .items { border: #F67186 2px solid; border-radius: 20px; width: 675px; padding: 30px; max-width: 600px; } .item-title { background-image: url('res/img/title.png'); background-size: cover; background-repeat: no-repeat; height: 55px; width: 350px; font-family: 'fzrzFont'; display: flex; justify-content: center; align-items: center; color: white; font-size: 35px; border-radius: 16px; letter-spacing:4px; } .usage-title { font-size: 30px; position: absolute; top: -30px; } .item-des { color: #F78094; border-radius: 20px; font-family: 'fzrzFont'; font-size: 30px; padding: 10px; } .item-usage { color: #F78094; border-radius: 20px; font-family: 'fzrzFont'; font-size: 20px; border: #F67186 5px dotted; padding: 60px 10px 10px 10px; position: relative; }