Question

任何人都可以建议最好的跨浏览器/设备方法来设置一个带有弯曲边缘的按钮的样式，该按钮会延伸到其父元素的宽度吗？

按钮需要使用背景图像 - 我正在考虑以下代码 - 按钮需要拉伸到90％外部div的宽度 - btnContent div将拉伸并且leftCurve / rightCurve保持相同的大小宽度。

<div style="width:90%">
 <div class="leftCurve"></div>
 <div class="btnContent">button 1</div>
 <div class="rightCurve"></div>
</div>

Answer 1

试试这个方法

<style>
.outerdiv{ width:100%;}
.rightcurve{ background:url(rightcurveimage.png) no-repeat 100% 0; height:20px; padding-right:10px;}
.leftcurve{ background:url(leftcurveimage.png) no-repeat 0 0; width:1%; height:20px; float:left; clear:right;}
.btncenter{ background:url(btncenterimage.png) repeat 0 0; height:20px; float:left; width:99%;}
</style>

<div style="width:100%">
 <div class="rightcurve">
  <div class="leftcurve"></div>
  <div class=btncenter> Button 1</div>
 </div>
</div>

注意：您必须将leftcurve和btncenter div放入rightcurve div

Answer 2

那不是真正的代码。在任何情况下，您都需要将90％放在btnContent而不是父元素上。

CSS按钮 - 父母的100％

2 个答案: