电话
13363039260
CSS 实现滑动门的实例代码
2024-01-17 11:20 小编
1、首先每一块文本内容是由a标签与span标签组成
<span></span>
2、a标签只指定高度，而不指定宽度。
3、a标签设置好背景图后，指定一个padding-left值，大小与左侧半圆大小相同，（这样保证左边背景不变，中间的背景进行拉伸即可）。
4、span标签同样指定该背景图片，不指定宽度，并且指定padding-right值将图片右半部分显示出来（这是要是定图片位置为右）
具体代码如下：
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;
}
aspan{
display:inline-block;
height:33px;
background:url(Images/vx.png)no-repeatright;
padding-right:15px;
}
span的背景要指定为right
<span>一</span>
<span>一句</span>
<span>一句话</span>
<span>一句长长的话</span>
<span>一句超级超级超级超级超级超级长的话</span>
猜你喜欢
联络方式：
13363039260
微信二维码 