Właściwości CSS Border
CSS border właściwości pozwalają określić styl, szerokość i kolor obramowania elementu.
Ten element ma swoją granicę rowka, który jest 15px szerokości i zielony.
Styl obramowania
border-style właściwość określa, jakiego rodzaju granicę do wyświetlenia.
Poniższe wartości są dozwolone:
-
dotted- definiuje granicę przerywana -
dashed- Określa przerywaną granicę -
solid- Definiuje stałą granicę -
double- double Określa granicę -
groove- Definiuje rowkowane granicę 3D. Efekt zależy od wartości granicznej kolorów -
ridge- Definiuje prążkowane granicę 3D. Efekt zależy od wartości granicznej kolorów -
inset- Definiuje obramowanie 3D wstawka. Efekt zależy od wartości granicznej kolorów -
outset- Definiuje początku granicę 3D. Efekt zależy od wartości granicznej kolorów -
none- nie określa granicę -
hidden- definiuje ukrytą ramkę
border-style właściwość może mieć od jednego do czterech wartości (dla górnej granicy, w prawej dolnej granicy, granicy, a po lewej stronie granicy).
Przykład
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Wynik:
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Spróbuj sam "  | Uwaga: Żaden z pozostałych właściwości CSS granicznych opisanych poniżej będzie miała żadnego wpływu, chyba że border-style właściwość jest ustawiona! |
|---|
Szerokość ramki
border-width właściwość określa szerokość czterech granic.
Szerokość może być ustawiona jako określonej wielkości (w px, pt, cm, em , etc) lub przy użyciu jednego z trzech predefiniowanych wartości z: cienkie, średnie lub grube.
border-width właściwość może mieć od jednego do czterech wartości (dla górnej granicy, w prawej dolnej granicy, granicy, a po lewej stronie granicy).
Przykład
p.one
{
border-style: solid;
border-width: 5px;
}
p.two
{
border-style: solid;
border-width: medium;
}
p.three
{
border-style: solid;
border-width: 2px 10px 4px 20px;
}
Spróbuj sam " Kolor ramki
border-color właściwość służy do ustawienia koloru czterech granic.
Kolor może być ustawiona przez:
- name - określa nazwę koloru, podobnie jak "red"
- Hex - określić wartość hex, jak "#ff0000"
- RGB - określić wartość RGB, jak "rgb(255,0,0)"
- transparent
border-color właściwość może mieć od jednego do czterech wartości (dla górnej granicy, w prawej dolnej granicy, granicy, a po lewej stronie granicy).
Jeśli border-color nie jest ustawiona, to dziedziczy kolor elementu.
Przykład
p.one
{
border-style: solid;
border-color: red;
}
p.two
{
border-style: solid;
border-color: green;
}
p.three {
border-style: solid;
border-color: red green blue yellow;
} Spróbuj sam " Border - poszczególnych boków
Z powyższych przykładów wynika, że was to jest możliwe, aby określić inną granicę dla każdej ze stron.
W CSS, istnieje również właściwości określające każdą z granic (górny, prawy, dolny i lewy):
Przykład
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Spróbuj sam " Powyższy przykład daje taki sam wynik jak poniżej:
Więc, oto jak to działa:
Jeśli border-style Obiekt ma cztery wartości:
- border-style : przerywana stałe dwukrotnie przerywana;
- górna granica jest przerywana
- prawe obramowanie jest stałe
- dolnej granicy jest podwójnie
- lewa granica jest przerywana
Jeśli border-style Nieruchomość posiada trzy wartości:
- border-style : przerywana solidne podwójne;
- górna granica jest przerywana
- Granice prawej i lewej są stałe
- dolnej granicy jest podwójnie
Jeśli border-style Nieruchomość posiada dwie wartości:
- border-style : przerywana stałej;
- Górne i dolne granice są przerywana
- Granice prawej i lewej są stałe
Jeśli border-style Nieruchomość posiada jedną wartość:
- border-style : przerywana;
- wszystkie cztery granice są przerywana
border-style właściwość jest używana w powyższym przykładzie. Jednak również współpracuje z border-width i border-color .
Border - Skrót nieruchomości
Jak widać z powyższych przykładów, istnieje wiele właściwości, należy wziąć pod uwagę przy rozpatrywaniu granicami.
Skrócić kodu, to jest również możliwe, aby określić, wszystkie indywidualne właściwości granicy w jednym obiekcie.
border Obiekt jest skróconą własnością dla następujących właściwości poszczególnych granicznych:
-
border-width -
border-style(wymagane) -
border-color
Więcej przykładów
Wszystkie najlepsze właściwości graniczne w jednej deklaracji
Ten przykład przedstawia skróconą własnością dla ustawienia wszystkich właściwości dla górnej granicy w jednej deklaracji.
Ustawia styl dolnej granicy
Ten przykład pokazuje jak ustawić styl dolnej granicy.
Ustaw szerokość lewej granicy
Ten przykład pokazuje jak ustawić szerokość lewej granicy.
Ustaw kolor z czterech granic
Ten przykład pokazuje, jak ustawić kolor czterech granic. To może mieć od jednego do czterech kolorów.
Ustawić kolor prawej granicy
Ten przykład pokazuje, jak ustawić kolor prawej granicy.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4»
Wszystkie właściwości CSS Border
| Nieruchomość | Opis |
|---|---|
| border | Ustawia wszystkie właściwości granicznych w jednej deklaracji |
| border-bottom | Ustawia wszystkie właściwości dolne graniczne w jednej deklaracji |
| border-bottom-color | Ustawia kolor dolnej granicy |
| border-bottom-style | Ustawia styl dolnej granicy |
| border-bottom-width | Ustawia szerokość dolnej granicy |
| border-color | Ustawia kolor czterech granic |
| border-left | Ustawia wszystkie pozostawione właściwości granicznych w jednej deklaracji |
| border-left-color | Ustawia kolor lewej krawędzi |
| border-left-style | Ustawia styl lewej krawędzi |
| border-left-width | Ustawia szerokość lewej granicy |
| border-right | Ustawia wszystkie odpowiednie właściwości granicznych w jednej deklaracji |
| border-right-color | Ustawia kolor prawego obramowania |
| border-right-style | Ustawia styl prawej krawędzi |
| border-right-width | Ustawia szerokość prawej krawędzi |
| border-style | Ustawia styl czterech granic |
| border-top | Ustawia wszystkie najlepsze właściwości granicznych w jednej deklaracji |
| border-top-color | Ustawia kolor górnej granicy |
| border-top-style | Ustawia styl górnej granicy |
| border-top-width | Ustawia szerokość górnej granicy |
| border-width | Ustawia szerokość czterech granic |