KATEGORIA:

Edycja obramowania, ramki – css

border css

BORDER-STYLE CZYLI STYL OBRAMOWANIA RAMKI

Ramkę, granicę jakiegoś elementu możemy zdefiniować dzięki cesze border-style. Cecha border-stylemoże mieć następujące wartości: dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden.

Dokładny ich wygląd przedstawia poniższy obrazek:
bordery

Możemy też określić styl każdej krawędzi z osobna w następujący sposób:

a{  
	border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

Taki sam efekt uzyskamy zapisując:

a {
    border-style: dotted solid;
}

W tym przypadku pierwsza wartość opisuje górną i dolną krawędź, druga natomiast prawą i lewą.

BORDER-WIDTH – GRUBOŚĆ LINII

Oprócz stylu, możemy określić również grubość linii. Używamy do tego celu cechy border-width. Wartości możemy podać w pikselach. Jeśli wpiszemy w kodzie: border-width: 5px; to będzie to dotyczyć wszystkich krawędzi. Możemy także określić grubość każdej krawędzi z osobna w następujący sposób: border-width: 2px 3px 4px 5px; – od lewej: krawędź górna, prawa, dolna, lewa. Zamiast pixeli (lub cm, em, etc) możemy wpisać: thinmedium albo thick.

BORDER-COLOR – KOLOR OBRAMOWANIA

Aby zmienić kolor obramowania należy użyć cechy border-color. Wartością może być kolor napisany słownie, jako HEX (np. #cecece), RGB (np. rgb(200, 0, 0) lub transparent.

BORDER – FORMA SKRÓCONA

Nie trzeba zapisywać każdej cechy z osobna. Najwygodniejszą formą jest samo border. Następnie określamy grubość, styl i kolor.

border: 1px solid green;

BOX-SHADOW – CIEŃ OBRAMOWANIA

Kiedy już określimy kolor, grubość i styl ramki, możemy dodać do niej cień. Robimy to w następujący sposób: box-shadow: 0px 0px 10px black. Pierwsza wartość to oddalenie cienia od osi x, druga od osi y, trzecia to rozmycie i czwarta kolor. Box-shadow szczegółowo będzie omawiany w osobnym artykule. Efekt takiego zabiegu prezentuje na obrazku poniżej.

shadow

BORDER-RADIUS – ZAOGRĄGLENIE ROGÓW

Ramka może też być obła dzięki border-radius. Wartości wyrażamy w pikselach. Im większa wartość, tym bardziej nasza ramka będzie zbliżona do koła. Przykład poniżej prezentuje wartość 50px.

radius

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *