圆角使用图像

Question

以下方法将是非常老的但仍然＆amp;对于有经验的人来说，这可能非常简单。

我使用Photoshop创建了一个带阴影的圆角面板。我已经切成了三个图像

a）左侧面板    b）中心面板    c）右侧面板

这是我对css的编码

.leftpanel
{
    background:url('../images/panelleft.png') no-repeat;
    float:left;
    width:19px;
    height:285px;
}
.centerpanel
{
    background:url('../images/panel_center.png') repeat-x;
    height:285px;
}
.rightpanel
{
    background:url('../images/panel_right.png') no-repeat;
    position:absolute;
    float:right;
    width:9px;
    height:285px;
}

这是我的html代码相同的

<div style="width:300px;">
    <div class="leftpanel">&nbsp;</div>
    <div class="centerpanel">
        heading
        <div class="rightpanel">&nbsp;</div>
    </div>
</div>

输出显示错误

左＆amp;中心正在走向完美，但正确的图像没有显示

请帮助我

谢谢＆amp;问候 马哈德

Answer 1

你可以使用:after和:before这样做：

jsFiddle（也在IE7上工作）

<强> HTML

<div class="panel">
    <div id="left"></div>
    header
    <div id="right"></div>
</div>

<强> CSS

div.panel:before, #left
{
    content:"";
background:url('http://i.stack.imgur.com/Kcs8F.png') no-repeat;
position:absolute;
top:0;
left:-9px;
width:9px;
height:100px;
}

.panel
{
background:url('http://i.stack.imgur.com/uOPT5.png') repeat-x;
height:100px;
width:200px;
position:relative;
margin:0 9px;
}

div.panel:after, #right
{
content:"";
background:url('http://i.stack.imgur.com/4sXib.png') no-repeat;
position:absolute;
top:0;
right:-9px;
width:9px;
height:100px;
}

创建背景并将其切成三部分：左，右，中心。

这是我的切片背景：

然后将width和height设置为:before和:after。 请注意，您需要将margin-left或margin-right设置为等于元素宽度。在这种情况下，它是9px;

更新

更改了CSS和HTML，以便在IE6和IE7中工作。

Answer 2

您需要从position:absolute;移除.rightpanel才能正确显示。

另外，对您的HTML进行以下更改。

<div style="width:300px;">
   <div class="rightpanel">&nbsp;</div>       
   <div class="centerpanel">heading</div>
   <div class="leftpanel">&nbsp;</div>
</div>

如果以上操作不起作用，请保留position:absolute; .rightpanel，并按照上面的说明更改HTML的顺序。

希望这有帮助。