css滑动门技术的应用,CSS滑动门技术

在自然界中，很多地方可以看到圆的曲线，甚至是圆的形状。就算是边边角角也都是圆润的弧度。例如：dva的性感小屁股。反观尖锐的90°直角在自然界中反到变成了一个另类。而在编写网页的时候也经常会用到“圆角”这类的表达方式，不得不承认圆角图形确实比直角图形有更友好的交互体验。

dva

圆角相关的解决方法有好几种。其中用图片解决圆角问题那是最简单粗暴，如果宽高是固定且已知的，直接background-image就能完美解决。例如

圆角

background-image属性是设置背景图片，所有浏览器都支持此属性，但是任何版本的IE(包括 IE8)都不支持属性值 “inherit“。用法是background-image:url("*url*");。这里面需要注意的是相对地址，由于这条声明是写在在CSS文件中的，图片的相对地址一定不能写错。否则啥也不会显示。

相对于background-image，我更是喜欢通过background设置背景属性来操作页面。这是一个简写属性，可以在一条声明中一次性设置所有的背景属性。通过background可以设置如下属性：

background-color(规定要使用的背景颜色。)

background-position(规定背景图像的位置。)

background-size(规定背景图片的尺寸。)

background-repeat(规定如何重复背景图像。)

background-origin(规定背景图片的定位区域。)

background-clip(规定背景的绘制区域。)

background-attachment(规定背景图像是否固定或者随着页面的其余部分滚动。)

background-image(规定要使用的背景图像。)

例如：background:url("") repeat-x top left;简单的介绍一下，background-repeat:repeat-x;在水平方向重复，background-position:top left;图片的初始位置在左上部。小tips:background-position如果只设置一个值，那么第二个默认的是center。

还有一点需要了解的是background-position还可以设置百分比和具体像素值，这个就是CSS Sprite的技术原理。更具体的使用请自行查找~！继续往下面进行吧。

为了能让背景图片完全的显示出来，应用background-image的元素必须要设置和图片一样的宽和高，宽和高的固定导致内容文本字数就有了限制，应用起来非常不灵活。人们的创造力还真是无穷的，为了应对字数问题，人们发明了一个技巧来应对这种情况——CSS滑动门技术。

滑动门技术原理很是简单，就是将图片分为左右两部分，左侧图片很窄，包含于第一层标签的的background属性中，是固定不变的，而右侧图片要做的尽可能宽一些。嵌套在第二层标签中的background属性中，处于右上角，且距离左侧留出左侧图片的宽度，以便左侧图片显示，这样，由于右侧图片足够长，随着文本增长，不会超过其长度，就好像可以随文本长度变化而变化一样。很形象的名称不是么？有好几种方式实现滑动门效果，基本原理都是一样的。直设背景图和推拉门技术的优劣下图可以清晰说明。

CSS滑动门技术优点

滑动门的代码量也是很少,不过需要掌握一点PS技术，事先要先把图片分成两部分然后分别存成图片：

/*css代码部分*/

#hdm li {

float: left;

background: url("jpg01.jpg") no-repeat left top;

margin: 0;

padding: 0 0 0 12px;

}

#hdm a {

float: left;

display: block;

background: url("jpg02.jpg") no-repeat right top;

padding: 5px 15px 4px 6px;

text-decoration: none;

font-weight: bold;

color: #765;

}

/*HTML代码部分*/

• 李东的博客

最后效果如下，这样字数就算加多也不会影响了，算是增加了一部分灵活性。

CSS滑动门展示

用图片作为背景来解决圆角的方案实现起来很简单，不过容易受图片本身的制约。图片多也就意味着浏览器链接数也会多会导致渲染效率低下。用图片背景不光能解决圆角边框的问题，再复杂的边框图形也是手到擒来，这是其他几种方法远远比不了的。例如一下几种复杂的边框，用border-radius和border-image那是绝对搞不定的。

复杂边框

滑动门是一项很老的技术了，现在它依然坚持工作在第一线，虽然border-radius和border-image的出现对这项技术有一定冲击，但是新东西需要浏览器支持，而有些应用场景还真是少不了background-image的活跃。状态不是很好，就写到这里吧。