Obramowanie to można stosować do różnego rodzaju elementów , takich jak : obrazki , nagłówki , akapity , itp.
--- niezbędne informacje - wstawianie stylów---
1. Styl obramowania :
selektor{
border-style: jakiś styl ;
}
2. Styl górnego obramowania :
selektor{
border-top-style: jakiś styl ;
}
3. Styl dolnego obramowania :
selektor{
border-bottom-style: jakiś styl ;
}
Styl lewego obramowania:
selektor{
border-left-style: jakiś styl ;
}
Styl prawego obramowania:
selektor{
border-right-style: jakiś styl ;
}
Zamiast " jakiś styl " należy wpisać :
- solid - linia ciągła ,
- double - linia podwójna ,
- dashed - linia kreskowana ,
- groove - linia mająca postać wyżłobionego rowka ,
- ridge - linia mająca postać wypukłego grzbietu ,
- dotted - linia kropkowana ,
- inset - ramka ,
- outset - przycisk.
Wszystkie te wartości można ze sobą mieszać , co spowoduje uzyskanie ciekawych i oryginalnych obramowań .
Szerokość obramowania .
Budowa cechy tego obramowania jest bardzo podobna do cech budowy stylu obramowania . Wystarczy jedynie zamiast " style " wstawić " width " , np:
selektor{
border-width: watrość ;
} .
Identycznie jak w przypadku wyżej opisanych stylów obramowania możemy określić jego szerokość osobno dla góry , dołu , lewej i prawej krawędzi z osobna ( top , bottom , left , right )
Jako wartość należy podać :
- thin - cienkie obramowanie ,
- medium - średnie obramowanie ,
- thick - grube obramowanie ,
- można też podać konkretną wartość , np: 7px .
Podobnie też jak w przypadku stylów obramowania , można stosować atrybuty mieszane jego szerokości , co oznacza , że można stosować różne grubości dla różnych części obramowania .
Kolor obramowania .
Jeśli zrozumiałeś już zasadę formatowania stylów na podstawie podanych wyżej przykładów , to z określaniem koloru obramowania również nie będziesz mieć problemów .
selektor{
border-color: wartość ;
}.
Podobnie jak w przypadku wyżej wymienionych przykładów można określić osobno kolory dla wszystkich krawędzi obramowania . Jako " wartość " należy podać nazwę koloru w języku angielskim , lub podać jego kod .
Zaokrąglenie .
selektor{
border-radius: wartość ;
}
Jeśli np. chcemy zaokrąglić prawą górną krawędź obramowania , to wówczas stosujemy następujący zapis:
selektor{
border-top-right-radius: wartość ;
}
Na tej samej zasadzie możemy zaokrąglić pozostałe krawędzie .
Jako " wartość " podajemy promień zaokrąglenia w pikselach ( np: 10px ) .
