Prosta i ciekawa funkcjonalność, która z pewnością poprawi walory Twojej strony internetowej czy bloga.
Do obsługi zaokrągleń w CSS służy parametr “border-radius“, którego wartością jest rozmiar promienia krzywizny zaokrąglenia (lub dwa promienie w przypadku zokrągleń eliptycznych). Jako, że parametr jest składnikiem CSS3, musimy dodać “zamienniki” (-webkit-border-radius oraz -moz-border-radius), które będą zrozumiałe dla przeglądarek nie obsługujących w pełni polecań CSS3.
Przykład:
Tekst z zaokrąglonymi bokami o promieniu 10px
[css]
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
[/css]
Tekst z eliptycznym zaokrągleniem o promieniu 10px i 15px
Należy pamiętać, że między rozmiarami promieni powinien stać znak “/” zamiast spacji!
[css]
-webkit-border-radius: 10px/15px;
-moz-border-radius: 10px/15px;
border-radius: 10px/15px;
[/css]
Możemy modyfikować także poszczególne krawędzie elementu:
Tekst z zaokrągloną prawą dolną krawędzią (promień 10px)
[css]
-webkit-border-bottom-right-radius: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomright: 10px;
-moz-border-radius-bottomright: 10px;
border-borrom-right-radius: 10px;
[/css]
Tekst z zaokrągloną lewą górną krawędzią (promień 10px)
[css]
-webkit-border-top-left-radius: 10px;
-webkit-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
-moz-border-radius-topleft: 10px;
border-top-left-radius: 10px;
[/css]
Przydatne klasy CSS (co to są klasy CSS i jak ich używać):
Małe zaokrąglenie wszystkich krawędzi:
[css]
.m_oval{
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
[/css]
Zaokrąglenie górnych krawędzi (górna prawa, górna lewa):
[css]
.oval_top {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-webkit-border-radius-topleft: 5px;
-webkit-border-radius-topright: 5px;
-khtml-border-radius-topleft: 5px;
-khtml-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
[/css]
Zaokrąglenia dolnych krawędzi (dolna lewa, dolna prawa):
[css]
.oval_bottom {
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-radius-bottomleft: 5px;
-webkit-border-radius-bottomright: 5px;
-khtml-border-radius-bottomleft: 5px;
-khtml-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
[/css]