Border nie pojawia się ciągły

Próbuję zrobić łuk używając border-radius tak (w Chrome)Border nie pojawia się ciągły

#elem { 
    border: 2px solid orange; 
    border-bottom: none; 

    width: 440px; 
    height: 60px; 
    border-top-right-radius: 220px 60px; 
    border-top-left-radius: 222px 60px; 
}

ale łuk nie jest ciągła. jeśli usunę właściwość border-bottom (co sprawia, że dolna granica jest widoczna), staje się ciągła. Nadanie przezroczystego koloru na granicy również nie pomaga.

np. http://jsfiddle.net/kFxec/9/

Nie można zrozumieć, co jest nie tak?

Próbuję tego tylko dla chrome. działa dobrze w firefox

Źródło

2013-07-03 Yogesh Khatri

Wygląda na to, że ma coś wspólnego z wysokości. Jeśli podniosę wysokość do 90 pikseli, jest w porządku. Czy Twoje pudełko musi mieć tylko 60 pikseli wysokości? –

lub możesz oszukać tak jak ten http://jsfiddle.net/kFxec/6/ :) – Pavel

działa również dla małych szerokości, ale faktycznie w moim przypadku szerokość/wysokość nie jest statyczna i dynamicznie przypisuję promień obramowania do szerokości i wysokości. jak promień poziomy 50% szerokości i promień pionowy wynosi 100% wysokości. zaktualizował pytanie poprawną wartością szerokości. –

Powiedziałbym, że jest to jakiś bug. Wydaje się być związane z dolną granicą. Znika z tego CSS

#elem { 
    border: 2px solid orange; 
    border-bottom: none; 

    width: 440px; 
    height: 60px; 
    border-top-right-radius: 220px 60px; 
    border-top-left-radius: 222px 60px; 
    border-bottom-left-radius: 2px; 
    border-bottom-right-radius: 2px; 
}

Co widzisz cięcia górną granicę wydaje dolną granicę robi dziwne rzeczy wokół. Ale nadawanie mu umiarkowanego promienia wydaje się w jakiś sposób sprawiać, że się zachowuje. (Nie wiem dlaczego)

fiddle

Źródło

2013-07-03 16:17:56 vals

świetnie .. to działa dla mnie –

mógłbyś zamiast fałszywy granicy z box-shadow: http://jsfiddle.net/ZC2m2/

#elem { 
    box-shadow:0 -2px 0 orange; 
    width: 440px; 
    height: 60px; 
    border-top-right-radius: 220px 60px; 
    border-top-left-radius: 222px 60px; 
}

Źródło

2013-07-03 15:07:21

To obejście jest niesamowite, ale niestety w naszym produkcie używamy stylu kropek. Napisałem to np. dowiedzieć się, co jest nie tak. może być błędem przeglądarki, niż powinienem iść z twoim rozwiązaniem. –

Border nie pojawia się ciągły

Odpowiedz

Powiązane problemy