在CSS'padding-left-bottom'中，存在类似的东西？

Question

我有像

这样的标题导航标签

样式如下

.navigation {
    border: 1px solid red;
    border-bottom: 0 none;
    border-radius: 8px 8px 0 0;
    color: #264B9B;
    padding-bottom: 1px;
}

如果我放弃padding-bottom: 1px;，则图片

左侧底部填充看起来很好，但右侧底部填充不正确。

如何纠正这种造型？

编辑： jsfiddle

中的html源代码

Answer 1

试试这个：

<强> HTML

<div class="navigation">
    <div class="left"></div>
    <div class="right"></div>
</div>

<强> CSS

.navigation {
    border: 1px solid red;
    border-bottom: 0 none;
    border-radius: 8px 8px 0 0;
    color: #264B9B;
    width:100px;
    height:80px;
    position:relative;
}
.navigation div{
    border-left: 1px solid red;
    width:100px;
    height:8px;
    bottom:-8px;
    position:absolute;
}
.left{
    border-radius:0;
    right:0px;
}
.right{
    border-radius:0 0 0 8px;
    right:-101px;
}

示例：http://jsfiddle.net/ujC95/