Działanie border radius

pytanie zadane 10 marca 2018 w HTML i CSS przez Selfie Początkujący (440 p.)

Witam. Jak działa border radius? Jest obliczany promień z danych wartości, oraz czy liczy się to samemu czy po prostu podczas pisania kodu sprawdza się kilka wartości i która pasuje najlepiej?

1 odpowiedź

odpowiedź 10 marca 2018 przez Chess Szeryf (76,710 p.)
wybrane 10 marca 2018 przez Selfie

Najlepsza

https://www.w3.org/TR/css-backgrounds-3/#the-border-radius

https://www.w3.org/TR/css-backgrounds-3/images/corner.png

Na obrazku wszystko widać. Pamiętaj, że ujemne wartości nie są dopuszczalne/dozwolone. Dwie wartości z właściwości 'border-*-radius' zdefiniowane są przez promień z ćwiartki elipsy, który określa kształt rogu zewnętrznej krawędzi obramowania. Pierwsza wartość jest poziomym promieniem, a druga pionowym. Jeśli druga wartość jest pominięta, to jest skopiowana z pierwszej. Jeżeli obie wartości są zerem, róg zostaje kwadratowy, nie zaokrąglony. Procenty dla poziomego promienia odnoszą się do szerokości z granicy pudełka, natomiast procenty dla pionowego promienia odnoszą się do wysokości z granicy pudełka.

komentarz 10 marca 2018 przez Selfie Początkujący (440 p.)

Dziękuję za odpowiedź! Mam jeszcze jedno pytanie. Przy projektach podczas przenoszenia z psd na kod html programiści liczą to w taki sposób czy jest to robione na +/- ?

komentarz 10 marca 2018 przez Chess Szeryf (76,710 p.)
edycja 10 marca 2018 przez Chess

Kto jak woli, zależy też od projektu. Albo inaczej. Żeby szablon PSD pasował pod kod HTML, to można przecież obliczyć wymiary poszczególnych elementów, rozmieszczenie pixeli, etc.. Może to być zrobione na "oko", tak żeby to jakoś wyglądało, a jeśli ktoś chce to zrobić bardzo dokładnie to sobie policzy od górnej krawędzi pixele, lewej krawędzi, zależnie od tego który róg chce zaokrąglić.

To działa w ten sposób, że zaokrągla rogi tak (z tego pierwszego link'a, co podałem):

W odległości 55pt od lewej krawędzi oraz 25pt od górnej zaczyna zaokrąglać róg. Im większe jednostki, tym róg jest bardziej zaokrąglony, ponieważ zaczyna dalej/najdalej od swojej początkowej pozycji. Najłatwiej chyba jest liczyć na px, jeśli ktoś policzy na px, to może w łatwy sposób dokonać konwersji na inne jednostki. Aha i jest jeszcze jedna kwestia. Nie wiem, czy to prawda, ale komputer i tak widzi wszystko jako prostokąty, kwadraty. Można to łatwo sprawdzić klikając PPM na zbadaj element i po zaznaczeniu tego zaokrąglonego radius'a roga widać, ten prostokąt/kwadrat dalej, miejsce się nie zwolniło. Mam nadzieję, że wiesz o co mi chodzi.

W skrócie:

I.

Masz PSD, czy jakąkolwiek szatę graficzną w jakimkolwiek formacie.

Dostajesz grafikę z zaokrąglonym rogiem.

Implementujesz, niepotrzebny jest żaden border-radius.

II.

-||-

Obliczasz, jaki kawałek rogu chcesz zaokrąglić.