Obramowanie w Css 3

Stylowanie obramowań (border) w CSS umożliwia deweloperom tworzenie wizualnych oddzielenia elementów, dodawanie dekoracji oraz podkreślanie ważnych sekcji na stronie internetowej. CSS oferuje szeroki zakres właściwości do manipulacji obramowaniami, w tym zmianę koloru, grubości, stylu, a także zaokrąglenie rogów. W tej lekcji przyjrzymy się różnym sposobom wykorzystania tych właściwości, aby stworzyć efektowne i funkcjonalne obramowania.

Przykład użycia obramowań w CSS

Poniżej znajduje się kompletny przykład kodu HTML i CSS, ilustrujący różne sposoby stylizacji obramowań.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stylowanie obramowań w CSS</title>
    <style>
        /* Styl podstawowy dla wszystkich przykładów */
        .example {
            margin: 20px;
            padding: 20px;
            text-align: center;
        }

        /* Obramowanie o stałej grubości i kolorze */
        .solid-border {
            border: 3px solid #000; /* Grubość: 3px, Styl: solid, Kolor: czarny */
        }

        /* Różne obramowania dla każdego boku */
        .different-sides {
            border-top: 4px dotted red; /* Górne obramowanie: kropkowane, czerwone */
            border-right: 2px dashed green; /* Prawe obramowanie: przerywane, zielone */
            border-bottom: 5px solid blue; /* Dolne obramowanie: ciągłe, niebieskie */
            border-left: 3px double orange; /* Lewe obramowanie: podwójne, pomarańczowe */
        }

        /* Skrócona notacja obramowań */
        .shorthand-border {
            border: 2px dashed purple; /* Grubość: 2px, Styl: przerywane, Kolor: fioletowy */
        }

        /* Zaokrąglone rogi */
        .rounded-border {
            border: 2px solid teal; /* Obramowanie ciągłe, kolor teal */
            border-radius: 15px; /* Zaokrąglenie rogów */
        }
    </style>
</head>
<body>
    <div class="example solid-border">Stałe obramowanie</div>
    <div class="example different-sides">Różne boki</div>
    <div class="example shorthand-border">Skrócona notacja</div>
    <div class="example rounded-border">Zaokrąglone rogi</div>
</body>
</html>

Opis przykładów

  • Stałe obramowanie (solid-border): Demonstruje użycie jednolitego, stałego obramowania wokół elementu.
  • Różne boki (different-sides): Pokazuje, jak zdefiniować różne style obramowań dla każdego boku elementu niezależnie.
  • Skrócona notacja (shorthand-border): Ilustruje użycie skróconej notacji do definiowania stylu, grubości i koloru obramowania.
  • Zaokrąglone rogi (rounded-border): Prezentuje sposób zaokrąglania rogów obramowania za pomocą właściwości border-radius.

Podsumowanie

Obramowania w CSS są potężnym narzędziem do podkreślania, oddzielania i dodawania estetycznego wyglądu do elementów na stronie internetowej. Dzięki różnorodności dostępnych opcji, takich jak zmiana koloru, stylu, grubości, możliwość definiowania różnych obramowań dla poszczególnych boków,

Poprzedni
Następny
Scroll to Top