CSS-滑动门技术

所谓滑动们技术就是元素内容增加时背景图片也跟着变宽（不会变形），不需要设置盒子的宽，不需要修改背景图大小；想要使用滑动门技术图片要足够宽才行

<!-- 基本 DOM 结构（其他元素也可以） -->
<a href="#" class="box">
  <span>span</span>
</a>

主要思路：a 标签是行内元素需要转成行内块级元素，设置背景图（图片左对齐，不重复）；span 标签同样转成行内款级元素，设置背景图片右对齐不重复

示例：

<div>
  <a href="#" class="box">
    <span>span</span>
  </a>
  <a href="#" class="box">
    <span>span 标签</span>
  </a>
</div>

/* 设置左半边背景图 */
a.box { 
   
  /* 转行内块元素，方便设置背景图 */
  display: inline-block;
  height: 33px;
  /* 行高等于元数据高度，单行文本垂直居中 */
  lien-height: 33px;
  color: #fff;
  padding-left: 15px;
  /* 设置背景图，不重复；背景图默认左对齐 */
  background: url(./images/bg.png) no-repeat;
}

/* 行内块、块级元素未设置宽高时其宽高由内容决定 */

/* 设置右半边背景图 */
a.box span { 
   
  display: inline-block;
  padding-right: 15px;
  /* 背景图片右对齐，不重复 */
  background: url(./images/bg.png) no-repeat right top;
}

今天的文章CSS-滑动门技术分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。