2

CSS リスト ( <ul>、<li>) のエッジに問題があります。左端に色と異なる太さを設定すると、下のスクリーンショットに示すように、重なりの下端が終了する問題:

ここに画像の説明を入力

写真では右を見るためにそこにいるので、ここで私はこの状況で私を助けてくれる人にフィドルを任せます.

http://jsfiddle.net/Igaojsfiddle/T6KrE/31/

#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-bottom:1px solid #999999;
**border-left:10px solid green;**
border-right:1px solid #999999;
height:55px;

}

4

1 に答える 1

1

それは正常です、ボーダーはコーナーにお互いに到達します。

box-shadow で線を引くことができます: http://jsfiddle.net/T6KrE/32/

#contactList > li {
    font-weight: bold;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px  3px -2px gray;;
    background-image: -webkit-linear-gradient(#ededed, #eff0f2);
    background-image: -moz-linear-gradient(#ededed, #eff0f2);
    background-image: -ms-linear-gradient(#ededed, #eff0f2);
    background-image: linear-gradient(#ededed, #eff0f2);

    border-left:10px solid green;
    border-right:1px solid #999999;
    height:55px;
}
于 2013-06-20T23:55:34.603 に答える