4

ボーダートップの幅が異なるため、ボーダーが重なり合うのに問題があります。

これが私の問題のコード例です: http://jsfiddle.net/u7KhX/

.border{ width: 200px; height: 200px; border-top:5px solid #894b9d; border-right: 1px solid #dad9d9; border-bottom: 1px solid #dad9d9; border-left: 1px solid #dad9d9;

ご覧のとおり、紫色の部分は未完成です。

何か案は？

4

2 に答える 2

5

::afterdiv の疑似要素を使用して、上部の境界線を完全な長方形にし、他の境界線を希望どおりにすることができます。

上部の境界線を div 自体に配置し、他の 3 つの境界線を疑似要素に配置します。

例えば：

.border {
    width: 200px; height: 200px; border-top:5px solid #894b9d;
    padding: 0 1px 1px 1px;
    position:relative;
}
.border::after {
    display:block; content:'';
    position:absolute; top:0; left:0;
    width:200px; height:200px;
    border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}

更新された fiddleを参照してください。

編集:
または、次のように、特定の幅と高さに依存したくない場合:

.border {
    display:inline-block;
    position:relative;
    padding:.5em;
    border-top:5px solid #894b9d;
}
.border::after {
    display:block; content:'';
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    border-color:#dad9d9; border-style:solid; border-width:0 1px 1px 1px;
}

動的なコンテンツ サイズで問題なく動作することを示すために、インライン ブロックにしましたが、あらゆる種類の幅で動作できます。

より更新されたフィドル。

于 2013-09-03T18:25:15.787 に答える