如何实现尺子样式html,纯CSS实现单元素构建的刻度尺

CSS

语言：

CSSSCSS

确定

html {

background: silver;

}

.ruler {

margin: 2em auto;

border: solid 1px #efd7a1;

width: 15.125em;

height: 3em;

box-shadow: 0 0 0 1px #A67336, -0.375em 0.375em 0.5em rgba(51, 51, 51, 0.7);

background-image: repeating-linear-gradient(90deg, #825723 0, #825723 0.125em, transparent 0, transparent 2.5em), repeating-linear-gradient(90deg, #825723 0, #825723 0.125em, transparent 0, transparent 1.25em), repeating-linear-gradient(90deg, #825723 0, #825723 0.125em, transparent 0, transparent 0.25em), linear-gradient(rgba(252, 230, 172, 0.8), rgba(130, 87, 35, 0.2)), radial-gradient(circle at 25% 200%, #edc070 53%, #f5d699 54%);

background-position: 1.25em 100%, 1.25em 100%, 1.25em 100%, 0 0, 0 0;

background-size: 12.625em 1em, 12.625em 0.5em, 12.625em 0.25em, 100% 100%, 100% 100%;

background-repeat: no-repeat;

color: #825723;

font: 700 2em/2 verdana, sans-serif;

letter-spacing: 1.775em;

text-indent: 1em;

}