Obramowanie w CSS3

By /

Html CSS

Obramowanie (border) w CSS3 to kluczowy element służący do dodawania ramki wokół elementów HTML. Obramowanie może być stosowane do dekoracji, podkreślenia istotnych informacji na stronie lub po prostu do oddzielenia jednych elementów od innych. CSS3 oferuje szeroki zakres możliwości stylizacji obramowań, w tym zmianę ich grubości, stylu, koloru, a nawet dodawanie zaokrągleń rogów.

Podstawowe właściwości obramowania:

  • border-width: Określa grubość obramowania.
  • border-style: Definiuje styl obramowania (np. solid, dashed, dotted).
  • border-color: Określa kolor obramowania.
  • border-radius: Pozwala na zaokrąglenie rogów obramowania.

Zaawansowane możliwości:

  • border-image: Umożliwia użycie obrazu jako obramowania.
  • box-shadow: Dodaje cień do elementu, tworząc efekt głębi.

Przykład użycia obramowania w CSS3

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Obramowanie w CSS3</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            border-width: 5px;
            border-style: solid;
            border-color: blue;
            border-radius: 10px;
            background-color: lightgray;
            text-align: center;
        }
        
        .dashed-border {
            border-style: dashed;
            border-color: green;
        }
        
        .rounded-corners {
            border-radius: 50px;
        }
        
        .shadow-box {
            box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
        }
    </style>
</head>
<body>
    <div class="box">Podstawowe obramowanie</div>
    <div class="box dashed-border">Przerywane obramowanie</div>
    <div class="box rounded-corners">Zaokrąglone rogi</div>
    <div class="box shadow-box">Obramowanie z cieniem</div>
</body>
</html>

Podsumowanie

Obramowanie w CSS3 jest potężnym narzędziem, które pozwala na dodawanie estetycznych i funkcjonalnych detali do elementów na stronie. Dzięki różnorodności właściwości, obramowanie może być dostosowane do potrzeb konkretnego projektu, od prostych ramek po skomplikowane efekty wizualne. Umiejętne stosowanie obramowania i efektów z nim związanych, jak zaokrąglenie rogów czy cienie, może znacząco wpłynąć na odbiór wizualny strony internetowej.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video WebDevelopera w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top