共计 755 个字符，预计需要花费 2 分钟才能阅读完成。
一、简配：无边框，四切角，纯色背景
border: none;
background: #289eef;
clip-path: polygon(
10px 0, calc(100% – 10px) 0,
100% 10px, 100% calc(100% – 10px),
calc(100% – 10px) 100%, 10px 100%,
0 calc(100% – 10px),0 10px);
二、在简配基础上直接加边框，切角部分边框也会被切掉
clip-path: polygon(
6px 0, calc(100% – 6px) 0,
100% 6px, 100% calc(100% – 6px),
calc(100% – 6px) 100%, 6px 100%,
0 calc(100% – 6px),0 6px);
三、显示完整边框
clip-path: polygon(
6px 0, calc(100% – 6px) 0,
100% 6px, 100% calc(100% – 6px),
calc(100% – 6px) 100%, 6px 100%,
0 calc(100% – 6px),0 6px);
background:linear-gradient(-45deg,#289eef 4px, #0c4e81 0) bottom right,
linear-gradient(45deg,#289eef 4px, #0c4e81 0) bottom left,
linear-gradient(135deg,#289eef 4px, #0c4e81 0) top left,
linear-gradient(-135deg,#289eef 4px,#0c4e81 0) top right;
background-size: 50% 51%;
background-repeat: no-repeat;
border: solid 2px #289eef;
