守着一只汪
这是另一个解决方案,linear-gradient您可以在其中轻松创建所需的任何种类的线。通过使用多个背景,您还可以有多行(例如,在每一侧):.box1 { width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(to right, transparent 20%, #000 20%, #000 40%, transparent 40%) 0 100% / 100% 3px no-repeat, #ccc}.box2 { width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat, #ccc}.box3{ width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(to right, transparent 20%, red 20%, red 80%, transparent 80%) 0 100% / 100% 2px no-repeat, linear-gradient(to right, transparent 30%, blue 30%, blue 70%, transparent 70%) 0 0 / 100% 2px no-repeat, linear-gradient(to bottom, transparent 30%, brown 30%, brown 70%, transparent 70%) 0 0 / 3px 100% no-repeat, linear-gradient(to bottom, transparent 20%, orange 20%, orange 70%, transparent 70%) 100% 0 / 3px 100% no-repeat, #ccc}<div class="box1"> Box1</div><div class="box2"> Box2</div><div class="box3"> Box3</div>这是与上述相同的另一种语法:.box1 { width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(#000, #000) top /40% 3px no-repeat, #ccc}.box2 { width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(red,red) bottom/ 60% 2px no-repeat, #ccc;}.box3{ width: 200px; padding: 20px; margin: 10px auto; text-align: center; background: linear-gradient(red , red)bottom left/ 60% 2px, linear-gradient(blue, blue) 60% 0 / 40% 2px, linear-gradient(brown, brown) left/ 3px 30%, linear-gradient(orange, orange) right / 3px 40%, #ccc; background-repeat:no-repeat;}<div class="box1"> Box1</div><div class="box2"> Box2</div><div class="box3"> Box3</div>