CSS滑动门技术

1.背景

制作网页时,为了美观,会制作设置特殊形状的背景, 里面的字数不一样,,为了使各种特殊形状能够自适应元素中文本内容的多少,出现了Css滑动门技术.是各种特殊形状的背景能够根据文本内容的多少拉伸滑动,可用性更强.最常见的是各种导航栏的滑动门.

2.原理

使用精灵技术(主要是背景位置)和padding撑开盒子,找一很长的背景图,使用两个盒子,

<a>
  <span>
  </span>
</a>

像有圆角的背景, a标签包含左边的圆角, span 包含右边的圆角,然后两个标签一对,就能显示出一个整的背景.再用padding在文本内容变化的时候撑开,将背景撑出来.（不能给宽度），如：

<style>
     a {
      display: inline-block;  //转化为行内块,就可以设置高度
      background: url(images/ao.png) no-repeat;
      height: 33px; //指定高度
      padding-left: 15px; //充开一小块盒子
      text-decoration: none;  // 去除下划线
      line-height: 33px;  //文字居中
}
    a span  {
    display: inline-block;
    height: 33px;
    background: url(images/ao.png) no-repeat right;
    /* span也不能给宽度，利用padding把盒子充开，  但是要背景中右边的
    形状，所以要背景位置右对齐  right   让两边对起来*/
    padding-right: 15px;/*根据需要的背景的形状大小定*/
}
</style>

使用如上代码就可以实现了。
PS:如果要使用滑动门实现鼠标移动到位置上进行换一张图片，实现了滑动门后使用如下style ：

  a:hover {
   background: url(../?.png);
}

  a:hover span {
   background: url(../?.png);
}