1.1 爲了使各種特殊形狀的背景能夠自適應元素中文本內容的多少， 出現了CSS滑動門技術。
1.2 使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的 文本內容，可用性更強。
1.3 最常見於各種導航欄的滑動門。
小程序版：
<!--pages/f/f.wxml-->
<view>滑動門</view>
<text>特殊形狀的背景能夠自適應元素中文本內容的多少</text>
<view>使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的文本內容，可用性更強</view>
<view class="tap">
<view class="item">1</view>
</view>
<view class="tap">
<view class="item">123</view>
</view>
<view class="tap">
<view class="item">123456</view>
</view>
<view class="tap">
<view class="item">123456789</view>
</view>
樣式
/* pages/f/f.wxss */
/*撐開展示左邊的圓角*/
.tap {
display: inline-block;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");
background-repeat: no-repeat;
height: 66rpx;
padding-left: 30rpx;
line-height: 66rpx;
color: #fff;
margin: 10rpx;
}
/*撐開展示右邊的圓角*/
.item {
display: inline-block;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYAAAAAhBAMAAAAi3mFzAAAAJ1BMVEUoJychICASEhIHBwdBQEA6OjozMzMYGBgtLS1hYWFPT09VVVVje2t90rgEAAABN0lEQVRYw9XWMUvDQBgG4PcKsep0X0HbMUmtWsf6Cwpx0KmBXih2iphTcGpAQsHBCNaODjpUpy4dOouLf84kFv/D+/Bx8/ty38HBlEbN1CeTtarkBuURes4wIGNy779A6NLFLw3cTYFIKPMHQTirCiS5c8YpgDUJErt5DYRGz1ECGzu0Bcx2ZGGFN78JbVHgkLhAdGIR71tiexGuZswFnlao387mvHPzDZkzy4eYPDLLd+GC2hSuptaFp7QQzxSeUHtARp2/uYPmJCOebIxGxixdo5YdpbyTvkP5zA5eAeoC3SXQYC5wDmjd5tV5U1C61qN1t1TQgvYpp97xOheIbr2wXsB4JeUNyJbPmb/zoZSCKKVNg3CL/PtFX1SxQqWLQZ3tE4HLRV9JsUJ/v7rrnwWZz6+4Sv4L/3WVTxhXFo4AAAAASUVORK5CYII=");
background-repeat: no-repeat;
background-position: right;
height: 66rpx;
padding-right: 30rpx;
line-height: 66rpx;
}
。。。
h5版
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>滑動門</title>
<!-- 1.1 爲了使各種特殊形狀的背景能夠自適應元素中文本內容的多少， 出現了CSS滑動門技術。
1.2 使各種特殊形狀的背景能夠自由拉伸滑動，以適應元素內部的 文本內容，可用性更強。
1.3 最常見於各種導航欄的滑動門。 -->
<style>
*{
margin: 0;
padding: 0;
}
a{
margin: 100px;
display: inline-block;
/*千萬不能設置寬*/
height: 33px;
background: url("img/lTcb_ve.png") no-repeat;
/*撐開展示左邊的圓角*/
padding-left: 15px;
color: #fff;
text-decoration: none;
line-height: 33px;
}
a span{
display: inline-block;
/*千萬不能設置寬*/
height: 33px;
/*no-repeat默認取的左邊的圖片，這裏需要取右邊的圖片*/
background: url("img/lTcb_ve.png") no-repeat right;
/*撐開展示右邊的圓角*/
padding-right: 15px;
}
</style>
</head>
<body>
<a href="#">
<span>首頁</span>
</a>
<a href="#">
<span>開發平臺</span>
</a>
<a href="#">
<span>北京尚學堂</span>
</a>
</body>
</html>