pytanie zadane 17 marca 2019 w Programowanie przez użytkownika
otagowane ponownie 12 października 2024 przez użytkownika

1 odpowiedź

odpowiedź 17 marca 2019 przez użytkownika
edycja 17 marca 2019 przez użytkownika

Czasami zdarza się, że chcesz na swojej stronie wstawić test (bądź inny element) w obramowanie. Fajnie też jakby rogi tego obramowania były zaokrąglone, a nie ostre. Można to co prawda zrobić graficznie (obrazkiem), ale po co obciążać stronę dodatkowymi multimediami, jeśli możesz zrobić ten efekt w HTML5 z pomocą CSS.

Żeby zaokrąglić rogi obramowania, musisz użyć funkcji radius wraz z jej właściwościami, w zależności, które konkretnie rogi chcesz zaokrąglić. Można przykładowo zaokrąglić tylko lewy górny róg, pozostawiając trzy pozostałe ostre.

border-top-left-radius - zaokrąglenie lewego górnego rogu
border-top-right-radius - zaokrąglenie prawego górnego rogu
border-bottom-left-radius - zaokrąglenie lewego dolnego rogu
border-bottom-right-radius - zaokrąglenie prawego dolnego rogu

Dodatkowo w powyższych funkcjach, należy zdefiniować narożniki, poprzez podanie dwóch wartości promienia poziomego i pionowego np. w pikselach, według poniższego schematu:

definiowanie narożników w funkcji radius html5

Teraz użyjmy tego w przykładzie, gdzie zaokrąglimy wszystkie rogi w obramowaniu dowolnego tekstu:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
border: medium solid black;
border-top-left-radius: 15px 10px;
border-top-right-radius: 15px 10px;
border-bottom-left-radius: 15px 10px;
border-bottom-right-radius: 15px 10px;

}
</style>
</head>
<body>
<p>
To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. To jest przykładowy tekst na stronę. 
</p>
</body>
</html>

Efekt mamy taki, że rogi zaokrągliły się z każdej strony w promieniach 15 i 10 pikseli, w taki dokładnie sposób, jak pokazuje pierwszy schemat. 

Wynik na stronie:

obramowanie z zaokrąglonymi rogami w html5

Oczywiście w obramowanie oprócz tekstu, możemy wziąć dowolny obiekt typu obrazek, tabelę, itp.

komentarz 11 lutego 2020 przez użytkownika Gość

Ciekawy efekt. Zawsze to wygląd nowocześniej niż jakieś kanciaste tabelkiwink

...