内裁圆角+双线边框的gradient实现
使用CSS background里的gradient系列函数实现内裁圆角+双线边框。
radial-gradient(circle at top left, skyblue 24px, white 24px 26px, transparent 26px) 4px 4px/26px 26px no-repeat
⓪skyblue
conic-gradient(at top left, skyblue 110deg, transparent 110deg 160deg, skyblue 160deg) 4px 4px/26px 26px no-repeat
①radial-gradient(circle at top left, skyblue 24px, white 24px 26px, transparent 26px) 4px 4px/26px 26px no-repeat
⓪skyblue
linear-gradient(white 0 4px, transparent 4px) 5px 5px/115px 26px no-repeat, linear-gradient(to right, white 0 4px, transparent 4px) 5px 5px/26px 75px no-repeat
②conic-gradient(at top left, skyblue 110deg, transparent 110deg 160deg, skyblue 160deg) 4px 4px/26px 26px no-repeat
①radial-gradient(circle at top left, skyblue 24px, white 24px 26px, transparent 26px) 4px 4px/26px 26px no-repeat
⓪skyblue
radial-gradient(circle at top left, skyblue 14px, white 14px 19px, transparent 19px) 5px 5px/26px 26px no-repeat
③linear-gradient(white 0 4px, transparent 4px) 5px 5px/115px 26px no-repeat, linear-gradient(to right, white 0 4px, transparent 4px) 5px 5px/26px 75px no-repeat
②conic-gradient(at top left, skyblue 110deg, transparent 110deg 160deg, skyblue 160deg) 4px 4px/26px 26px no-repeat
①radial-gradient(circle at top left, skyblue 24px, white 24px 26px, transparent 26px) 4px 4px/26px 26px no-repeat
⓪skyblue
linear-gradient(white 0 2px, transparent 2px) 27px 12px/93px 5px no-repeat, linear-gradient(to right, white 0 2px, transparent 2px) 12px 27px/5px 53px no-repeat
④radial-gradient(circle at top left, skyblue 14px, white 14px 19px, transparent 19px) 5px 5px/26px 26px no-repeat
③linear-gradient(white 0 4px, transparent 4px) 5px 5px/115px 26px no-repeat, linear-gradient(to right, white 0 4px, transparent 4px) 5px 5px/26px 75px no-repeat
②conic-gradient(at top left, skyblue 110deg, transparent 110deg 160deg, skyblue 160deg) 4px 4px/26px 26px no-repeat
①radial-gradient(circle at top left, skyblue 24px, white 24px 26px, transparent 26px) 4px 4px/26px 26px no-repeat
⓪skyblue
