【CSS】实现 渐变色+圆角 border
.charcard {
position: relative;
box-shadow: -5px 0px 32px 2px #005bae1a inset, 0px -5px 32px 2px #005bae1a inset, 5px 0px 32px 2px #005bae1a inset, 0px 5px 32px 2px #005bae1a inset;
border: 0.2rem solid #4F89CB4D;
border-right-color: #4F89CB4D;
border-left-color: #4F89CB4D;
border-image: linear-gradient(85deg, #4F89CB4D, #0363b5CC 25%, #4F89CB4D) 2 2 2 2;
box-sizing: border-box;
background-color: rgb(7 18 43);
margin: 0.8rem;
}
.charcard::after {
content: '';
display: block;
border: 0.3rem solid #0e162d;
border-radius: 0.8rem;
position: absolute;
top: -0.5rem;
left: -0.5rem;
width: calc(100% + 1rem);
height: calc(100% + 1rem);
}
.charcard-content * {
z-index: 1;
}

浙公网安备 33010602011771号