12

これは単純な質問です。誰かが以前にこれを尋ねたと思いますが、本当の答えは得られませんでした.

私が望むのは、境界線の重なりを避けることです。それはとても簡単です。次に例を示します。

div{
   width: 400px;
   height: 150px;
   border: 1px solid red;
   border-bottom: 7px solid black;
}

ボーダーオーバーラップ

コーナーで境界線が重なっていることがわかります。

ライブの例は次のとおりです: jsFiddle の例

私が本当にやりたいことは、下の境界線が左右の境界線を覆うようにすることです。誰かが私にここで何ができるか教えてもらえますか?

4

1 に答える 1

21

div に疑似要素を重ねることができます。

div {
    background-color: gold;
    border-top: 4px solid #172e4e;
    height: 100px;
    position: relative;
    width: 100px;
}

div::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0px; left: 0; right: 0;
    border-right:4px solid orange;
    border-left:4px solid orange;
}

例: http://jsfiddle.net/vpHW5/10/

于 2013-09-16T20:05:33.610 に答える