Latest web development tutorials

CSS Border (Borders)

Właściwości CSS graniczne

Właściwości border CSS pozwalają określić element za styl i kolor obramowania.

styl obramowania

Obiekt w stylu Granicznej określa, jakiego rodzaju granicy mają być wyświetlane.

uwaga Własnośćborder-style jest używane do określenia styl granicy

wartość border-style:

Brak: domyślny granicy

przerywana: przerywana: Określa ramkę

przerywana: Określa przerywaną okno

stałe: definicja stałej granicy

dwukrotnie: zdefiniować dwie granice. Te same wartości szerokości dwóch granic i border-szerokość

rowka: Rowek zdefiniowana granica 3D. Efekt zależy od wartości kolorów granicy

Grzbiet: definicja 3D grzbiet graniczny. Efekt zależy od wartości kolorów granicy

wstawka: Określa 3D osadzone granicy. Efekt zależy od wartości kolorów granicy

wstępie: Definiuje początku granicę 3D. Efekt zależy od wartości kolorów granicy

Spróbuj: ustawić styl obramowania

Szerokość ramki

Możesz określić szerokość granicy przez atrybut border-width.

Określa szerokość za granicę na dwa sposoby: można określić długość wartości, takich jak 2px lub 0.1em; lub użyć jednego z trzech słów kluczowych, które są cienkie, średnie (domyślnie) i grube.

Uwaga: CSS nie definiuje trzy kluczowe określoną szerokość, więc aplikacja kliencka może być cienkie, średnie i grube odpowiednio równy 5px, 3PX i 2px, podczas gdy inna aplikacja kliencka odpowiednio ustawiony 3PX, 2px i 1px.

Przykłady

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Spróbuj »

Kolor ramki

Własność border-color ustawia kolor obramowania. Można ustawić kolor:

  • Nazwa - określa nazwę koloru, takie jak "czerwony"
  • RGB - określić wartość RGB, takie jak "rgb (255,0,0)"
  • Hex - Określa wartość szesnastkową, takich jak "# ff0000"

Można również ustawić kolor obramowania na "przezroczysty".

Uwaga: border-color sami nie działa, trzeba mieć możliwość korzystania z border-style ustawić styl obramowania.

Przykłady

p.one
{
border-style: stały;
border-color: red;
}
p.two
{
border-style: stały;
border-color: # 98bf21;
}

Spróbuj »

Border - odrębne ustawienia dla każdej strony

W CSS można określić różnych stronach różne granice:

Przykłady

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

Spróbuj »

Powyższy przykład można także ustawić jeden atrybut:

Przykłady

border-style:dotted solid;

Spróbuj »

Własność border-style może mieć od jednego do czterech wartości:

  • border-style: przerywana stałe dwukrotnie przerywana ;
    • Granice rozsianych
    • Prawy graniczny jest stałe
    • Podwójny dolnej granicy
    • Lewa granica jest przerywana

  • border-style: przerywana solidne podwójne;
    • Granice rozsianych
    • Lewa i prawa granica jest stałe
    • Podwójny dolnej granicy

  • border-style: przerywana stałej;
    • Na dole jest przerywana granicy
    • Granice prawy i lewy są stałe

  • border-style: przerywana;
    • Otoczony granicy przerywaną

Powyższy przykład używa border-style. Jednak może to być również border-width, border-color razem.

Border - skróconą własnością

Powyższy przykład wykorzystuje wiele właściwości, aby ustawić granicę.

T Można również ustawić granicę w nieruchomości.

Można atrybut "Granica" set:

  • border-width
  • border-style (wymagane)
  • border-color

Przykłady

border:5px solid red;

Spróbuj »

Przykłady

Więcej przykładów

Wszystkie obiekty graniczne w jednej deklaracji bycia
Ten przykład pokazuje skróconą właściwość, aby ustawić wszystkie cztery właściwości granicznych w tej samej instrukcji.

Ustawianie styl obramowania
Ten przykład pokazuje jak ustawić styl dolnej granicy.

Ustawienie szerokości 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. Można ustawić jeden do czterech kolorów.

Ustawić kolor prawej granicy
Ten przykład pokazuje, jak ustawić kolor prawej granicy.

Właściwości CSS graniczne

nieruchomość opis
granica Skrócona forma ustawić właściwość z czterech stron w oświadczeniu.
border-style Jest on stosowany, aby ustawić styl obramowania wszystkich elementów, lub osobno ustawić styl obramowania dla każdej ze stron.
border-width Wszystko granicy skróconą własnością ustawia szerokość elementu, lub indywidualnie ustawić szerokość po obu stronach granicy.
border-color Skrócona forma, element całej widocznej części kolory granicznej lub ustawić kolor, odpowiednio cztery boki.
border-bottom Skrócona forma ustawić wszystkie atrybuty granicy z oświadczeniem.
border-bottom-color Określić kolor dolnej krawędzi elementu.
border-bottom-style Ustawienie elementów styl obramowania.
border-bottom-width Ustawić szerokość dolnej krawędzi elementu.
border-left Skrócona forma podania wszystkich właściwości lewej granicznych z oświadczeniem.
border-left-color Ustaw kolor lewym elemencie granicy.
border-left-style Element lewej stylu granicznego.
border-left-width Element lewej szerokości granicznej.
border-right skróconą własnością dla ustawienia wszystkich właściwości po prawej stronie okna z oświadczeniem.
border-right-color Określić kolor prawego elementu granicy.
border-right-style Element odpowiednich stylów obramowania.
border-right-width Ustawić szerokość prawego elementu granicy.
border-top skróconą własnością dla ustawienia wszystkich właściwości na granicy z oświadczeniem.
border-top-color Element jest na kolor obramowania.
border-top-style Element jest ustawiony na styl obramowania.
border-top-width Element jest na szerokości granicy.