所謂的滑動(dòng)門技術(shù)，就是指盒子背景能夠自動(dòng)拉伸以適應(yīng)不同長(zhǎng)度的文本。即當(dāng)文字增多時(shí)，背景看起來(lái)也會(huì)變長(zhǎng)。

大多數(shù)應(yīng)用于導(dǎo)航欄之中，如微信導(dǎo)航欄:

具體實(shí)現(xiàn)方法如下：

1、首先每一塊文本內(nèi)容是由a標(biāo)簽與span標(biāo)簽組成

<a href="#"><span></span></a>

2、a標(biāo)簽只指定高度，而不指定寬度。

3、a標(biāo)簽 設(shè)置好背景圖后，指定一個(gè)padding-left值，大小與左側(cè)半圓大小相同，（這樣保證左邊背景不變，中間的背景進(jìn)行拉伸即可）。

4、span標(biāo)簽同樣指定該背景圖片，不指定寬度，并且指定padding-right值將圖片右半部分顯示出來(lái)（這是要是定圖片位置為右）

具體代碼如下：

a {color: white;line-height: 33px;margin: 100px;display: inline-block;text-decoration: none;/* a不能給寬度 *//* */height: 33px;background: url(Images/vx.png) no-repeat;padding-left: 15px;}a span {display: inline-block;height: 33px;background: url(Images/vx.png) no-repeat right;padding-right: 15px;}

span 的背景要指定為right

<a href="#"><span>一</span></a><a href="#"><span>一句</span></a><a href="#"><span>一句話</span></a><a href="#"><span>一句長(zhǎng)長(zhǎng)的話</span></a><a href="#"><span>一句超級(jí)超級(jí)超級(jí)超級(jí)超級(jí)超級(jí)長(zhǎng)的話</span></a>

顯示結(jié)果為

可以發(fā)現(xiàn)隨著span標(biāo)簽中文本長(zhǎng)度的變化將會(huì)帶動(dòng)背景圖片的拉伸。

?

本文轉(zhuǎn)載于:猿2048https://www.mk2048.com/blog/blog.php?id=h1cbab&title=CSS 小結(jié)筆記之滑動(dòng)門技術(shù)

總結(jié)

以上是生活随笔為你收集整理的CSS 小结笔记之滑动门技术的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。