滑动门技术制作不规则按钮_滑动门实现不规则的注意事项-CSDN博客

本文链接：https://blog.csdn.net/del1214/article/details/6767864

有时候美工脑残的设计了不规则的按钮或边框等，做网页的都知道那玩意实现起来很麻烦，美不美观也是因人而异

这次有个美工做了这么个按钮给我，我日他先人先，因为项目要国际化所以里面的文字是变化的不能用图片只能用滑动门技术了

实现方法如下

html代码：

<div>
    <a href="javascript:void(0)" class="fSlideDoorA">
	<span id="searchABody" class="mapSlideDoorBody">
		<img width="15" height="15" src="/images/common/slideDoorRight.png"/>
                <span>登录</span>
       </span>
	<span class="mapSlideDoorHead">
           <img id="searchAHead" width="13" height="25" src="/images/common/slideDoorHead.png"/>
        </span>
    </a>
</div>

css代码：

.mapSlideDoorBody{
	vertical-align:middle;
	height: 25px;
	float:left;
	background:url("/images/common/slideDoorBody.png") repeat-x;
	color:black;
	padding: 0 5px;
	cursor: pointer;
}

.mapSlideDoorBody img{
	float:left;
	margin: 5px 5px 0 5px;
	padding: 0px;
}
.mapSlideDoorBody span{
	float:left;
}


.mapSlideDoorHead{
	float:left;
	margin: 0px;
	height: 25px;
	padding: 0px;
	cursor: pointer;
}
.mapSlideDoorHead img{
	margin: 0px;
	padding: 0px;
}

图片和文字漂一下，可以实现垂直居中的效果，用完记得清一下