Web编程技术营地
研究、演示、创新

CSS Styling Matrix

撰写时间:2026-04-18

修订时间:2026-04-18

使用:before及:after伪类

div.matrix-brace { box-sizing: border-box; background-color: #444; width: fit-content; font-size: 3em; padding: 0.5em; font-family: monospace; & > div { --border-value: 1px solid #28CDC1; box-sizing: border-box; line-height: 0.5em; padding: 0.5em; width: fit-content; position: relative; background-color: #222; &:not(:first-of-type):not(:last-of-type) { border-left: var(--border-value); border-right: var(--border-value); } &:first-of-type, &:last-of-type { &:before, &:after { content: ""; display: block; position: absolute; top: 0; width: 0.5em; height: 100%; } } &:first-of-type { &:before, &:after { border-top: var(--border-value); } &:before { left: 0; border-left: var(--border-value); } &:after { right: -2px; border-right: var(--border-value); } } &:last-of-type { &:before, &:after { border-bottom: var(--border-value); } &:before { left: 0; border-left: var(--border-value); } &:after { right: -2px; border-right: var(--border-value); } } } }
8 4 5 6
3 2 1 5
2 3 7 4
7 1 5 9

参考资源

  1. CSS Backgrounds and Borders Module Level 3