.item{ padding: 20px; background: #FFFFFF4D; backdrop-filter: blur(15px); border-radius: 8px; position: relative; margin-top: 20px; // 使用伪元素创建边框 &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid transparent; border-image-slice: 1; border-image-source: conic-gradient(from 102.21deg at 52.75% 38.75%, rgba(249, 249, 249, 0.5) -32.95deg, rgba(64, 64, 64, 0.5) 10.52deg, rgba(64, 64, 64, 0.35) 32.12deg, #FFFFFF 60.28deg, rgba(255, 255, 255, 0.5) 107.79deg, rgba(64, 64, 64, 0.35) 187.59deg, #F9F9F9 207.58deg, #FFFFFF 287.31deg, rgba(249, 249, 249, 0.5) 327.05deg, rgba(64, 64, 64, 0.5) 370.52deg); border-radius: 8px; pointer-events: none; } // 合并多个阴影效果,用逗号分隔 box-shadow: -2px 4px 10px 0px #9191910D, -7px 17px 18px 0px #9191910A, -15px 37px 24px 0px #91919108, -27px 66px 29px 0px #91919103, -42px 103px 31px 0px #91919100; } .item-num{ font-size: 26px; font-weight: 600; line-height: 32px; letter-spacing: 0em; text-align: left; } .item-title{ font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0em; text-align: left; margin-top: 20px; color:#666666; } .search-button{ background-image: url('../../assets/img/assetmangement1.png'); background-repeat: no-repeat; background-size: cover; background-position:center; color: #fff; border-radius: 4px; height: 36px; border-color:#d9d9d9 ; background-color: #045F5E80; } .reset-button{ background-image: url('../../assets/img/assetmangement2.png'); background-repeat: no-repeat; background-size: cover; background-position:center; color: rgba(0, 102, 101, 1); border-radius: 4px; height: 36px; border-color:#d9d9d9 ; background-color: #B7E5D533; } .del-button{ background-image: url('../../assets/img/assetmangement3.png'); background-repeat: no-repeat; background-size: cover; background-position:center; color: #000; border-radius: 4px; height: 36px; width:88px; border-color:#d9d9d9 ; background-color: #E5B7B733; }