css3凹角和虛線樣式
阿新 • • 發佈:2021-06-28
如圖所示
//凹角樣式 li:nth-child(1)::before, li:nth-child(2)::before, li:nth-child(1)::after, li:nth-child(2)::after { content: ""; width: 0.2rem; height: 0.2rem; background-color: inherit; background-color: #F0FDFC; position: absolute; z-index: 10; box-sizing: border-box; } li:nth-child(1)::before { border-radius: 0 100% 0 0; left: 0px; bottom: 0px; } li:nth-child(2)::before { border-bottom-right-radius: 100%; left: 0px; top: 0px; } li:nth-child(1)::after { border-radius: 100% 0 0 0; right: 0px; bottom: 0px; } li:nth-child(2)::after { border-bottom-left-radius: 100%; right: 0px; top: 0px; }
//可以自由調節虛線樣式 .dashed { display: inline-block; font-size: 0.44rem; background: linear-gradient(90deg, #E0E1E3 66%, transparent 0) repeat-x; background-size: 0.5em 0.02rem; background-position: 0 0; text-shadow: 0.05em 0 #fff, -0.05em 0 #fff; }