Potrzebuję zbudować element div z zakrzywioną krawędzią narożnika, bez użycia żadnych obrazów w rogu. Czy to możliwe?Zakrzywiona krawędź narożna dla elementu div
Nie chcę wstawiać zakrzywionych obrazów w rogu. Proszę, pomóż mi w tej sprawie.
Spróbuj tej biblioteki na zewnątrz, to nie cuda dla mnie! Jest to przetestowane rozwiązanie dla różnych przeglądarek.
Ta strona wydaje się [w dół] (http://www.downforeveryoneorjustme.com/http://www.curvycorners.net). [Ostatnia aktualizacja projektu] (http://code.google.com/p/curvycorners/source/list) odbyła się w marcu 2011 r. Projekt jest hostowany na [Google Code] (http://code.google.com/p/curvororners /). –
można użyć CSS do osiągnięcia zaokrąglone narożniki w nowoczesnych przeglądarkach ...
border-radius: 10px;
ten jest znany jako progressive enhancement. IMO, to lepsze niż obrazy i czy sztuczki CSS z marginesami i granicami. Chyba że absolutnie musisz mieć zaokrąglone rogi.
Jeśli chcesz polegać na WebKit i Mozilla przeglądarek, można użyć następujących poleceń CSS:
.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
}
Szczegóły można oglądać here.
informacji o specyfikacji CSS2 border-radius można znaleźć here
Są niestety nie działają tzn.
można przejść do javascript dla IE tylko przy użyciu niftycube, który ma dodatkową zaletę bez problemu wspierając wyrównanie wysokości kolumn.
Oto jeden, który napisałem, że możesz go używać, jeśli ci się podoba. Wykonuje zaokrąglone naroże o dowolnych wymiarach z kolorem tła, ale nie obramowaniem całego okna. Ma on białe tło, ale można to zmienić edytując kolor obramowania w stylach c3, c2 & c3.
.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}
<div class="rounded" style="width:200px;height:100px">
<div class="c1"></div><div class="c2"></div><div class="c3"></div>
<div class="inner">
-- Content Here --
</div>
<div class="c3"></div><div class="c2"></div><div class="c1"></div>
</div>
Chciałbym użyć wtyczki jQuery do obsługi zaokrąglonych narożników. Oto lista dostępnych zaokrąglonych wtyczek narożnych w witrynie jQuery: http://plugins.jquery.com/taxonomy/term/189
sprawdź [ten post] (http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie) - bardzo prosty kod CSS3 dla różnych przeglądarek. – Shahar