使用圖像的圓角

Question

以下方法將是一種較老的方法，但對於有經驗的人而言，它可能會非常簡單。

我使用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>

輸出顯示錯誤

左側和中央完美到達，但右側圖像未顯示

請幫助我

謝謝與問候馬哈德萬

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;

更新：

更改了在IE6和IE7中使用的CSS和HTML。

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的順序即可，如上所述。

希望這可以幫助。