方法一:利用css3中的缩放:
<style> * { margin: 0; padding: 0; } .box { width: 800px; height: 200px; margin: 100px auto; /* background-color: red; */ text-align: center; } i { display: inline-block; height: 1px; width: 300px; background-color: black; vertical-align: middle; } span { text-align: center; } .xi { transform: scale(1, .5); } </style> </head> <body> <div class="box"> <i class="xi"></i> <span> 就敢怼!</span> <i></i> </div> </body>效果:
方法2: 利用盒子阴影 box-shadow:0 0 .5 0 #000000 效果:
其中 box-shadow()里面有5个值,分别是x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色
