CSS3自定义特殊边框按钮或盒子，中间部分自适应，两边不变

本文链接：https://blog.csdn.net/nllkjlk/article/details/125546269

本文介绍web端十年前已经失传的CSS自适应按钮或盒子

当然大佬们如果有更好的实现方法，请不要藏着掖着啊，写好了踹我一下
如下图：
按钮样式图
想要实现上图效果，可以把它分为三部分左侧 中间 右侧，需要类似于下面这样的切图

左边边框背景图
中间1px宽度的背景图
右边边框背景图
总共需要三张切图
当切图素材制作完毕后，我们就可以开始了
前提说明：图片的高度是46px,宽度根据内容自适应
话不多说，直接上代码：
HTML：

//按钮的本质其实就是一个`a`标签，如果你做的不是按钮，也可以用其他标签
<a href="">
	<div class="leftBar">
		<span>住院指南</span>
	</div>
</a>

CSS（使用了Less预处理）:

a {
	display: block;
    background: url(../images/button_inactive_leftBac.png) 0 0 no-repeat;
    width: 100%;
    height: 46px;
    text-decoration: none;
    color: #856014;
    .leftBar {
    	height: 46px;
        display: inline-block;
        background: url(../images/button_inactive_rightBac.png) 100% 0 no-repeat;
        span {
        	display: inline-block;
            background: url(../images/button_inactive_center.png) repeat-x;
            line-height: 46px;
            margin: 0 21px;//21px是两边边框的宽度
            padding: 0 21px;//当然文字也需要有一个padding值
		}
	}
}