javascript - 使用图像的圆 Angular

Question

下面的方法可能是非常古老的方法，但对于有经验的人来说仍然很简单。

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

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;

更新:

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