2016-08-11 6 views
0

私はこのhttps://jsfiddle.net/ymony0qy/で助けが必要です。なぜボーダー半径とボーダーを持つラベルは、いくつかの外側のコーナーボーダーを作りますか?

.row { 
 
    height: 50px; 
 
    display:table-row; 
 
    
 
} 
 
.col-left, .col-right { 
 
    
 
    display: table-cell; 
 
    vertical-align: middle; 
 
} 
 

 
.col-left{ 
 
    width: 100px; 
 
    background-color: #FFCC66 ; 
 
    text-align: center; 
 
} 
 

 
.col-left .content span{ 
 
    font-size: 20px; 
 
} 
 

 
.lab-variace { 
 
    background: #ff6800; 
 
    color: #fff; 
 
    border-radius: 15px; 
 
    border-collapse: separate; 
 
    padding: 1.2em; 
 
    margin: 0.2em; 
 
    cursor: pointer; 
 
    width: 220px; 
 
    display: table-cell; 
 
    border: 5px #fff solid; 
 
    height: 60px; 
 
} 
 

 
.lab-variace:hover { 
 
    background:#ccc; 
 
} 
 

 
.radio-varia:checked + .lab-variace{ 
 
    background: red; 
 
} 
 

 
.variace{ 
 
    margin-bottom: 15px; 
 
} 
 

 
.radio-varia{ 
 
    visibility: hidden !important; 
 
    position: absolute !important; 
 
}
<div id="variace"> 
 
     <div class="row"> 
 
     <input type="radio" name="pred_conf" id="zaklad" onclick="pocitej_vps()" value="zaklad" class="radio-varia"><label class="lab-variace" for="zaklad">Var 1<br />xx<br />xx<br />x</label> 
 
\t \t \t <input type="radio" name="pred_conf" id="stred" onclick="pocitej_vps()" value="stred" class="radio-varia"><label class="lab-variace" for="stred">Var 1<br />xx<br />xx<br />x</label> 
 
     </div><div class="row"> 
 
\t \t \t <input type="radio" name="pred_conf" id="extra" onclick="pocitej_vps()" value="extra" class="radio-varia"><label class="lab-variace" for="extra">Var 1<br />xx<br />xx<br />x</label> 
 
     <input type="radio" name="pred_conf" id="own" checked="checked" onclick="pocitej_vps()" value="own" class="radio-varia"><label class="lab-variace" for="own">Var 1<br />xx<br />xx<br />x<br /><br /><br /></label> 
 
     </div></div>

bad corners

あなたはすべてのコーナーで見ることができるようにいくつかの小さな点線の外側のラインです。 ボーダーを削除すると:5px #fff solid;これは問題ありません。それのための任意のヘルプ?ありがとう

+0

あなたがピクセルの上限に達したからです。あなたが見るものはピクセルで達成可能な最大値です。もっと正確なことをするにはベクトルが必要です。 – Relisora

答えて

1

.lab-variace.radio-varia:checked + .lab-variaceクラスでbackground-clip:padding-boxを試してみてください。

Fiddle

More info on background-clip

+0

ありがとう、それは私が必要なものです – Pavel

関連する問題