CSS
Granica

Składnia

• granica

• border: szerokość-granica styl-granica kolor-granica | inicjał | dziedziczyć;

• border-top: border-width border-style border-color | inicjał | dziedziczyć;

• border-bottom: border-width border-style border-color | inicjał | dziedziczyć;

• border-left: border-width border-style border-color | inicjał | dziedziczyć;

• border-right: border-width border-style border-color | inicjał | dziedziczyć;

• styl graniczny

• styl graniczny: 1-4 brak | ukryty | kropkowane | przerywany | stałe | podwójne | rowek | grzbiet | wstawka | początek | inicjał | dziedziczyć;

• promień granicy

• promień obramowania: długość 1-4 | Długość% / 1-4 | % | inicjał | dziedziczyć;

• border-top-left-radius: length | % [długość | %] | inicjał | dziedziczyć;

• border-top-right-radius: length | % [długość | %] | inicjał | dziedziczyć;

• border-bottom-left-radius: length | % [długość | %] | inicjał | dziedziczyć;

• border-bottom-right-radius: length | % [długość | %] | inicjał | dziedziczyć;

• obraz granicy

• border-image: border-image-source border-image-slice [border-image-width [border-image-outset]] border-image-repeat

• border-image-source: brak | wizerunek;

• border-image-slice: 1-4 number | procent [wypełnij]

• border-image-repeat: 1-2 odcinek | powtórz | okrągły | przestrzeń

• zawalenie się granicy

• zwinięcie granicy: osobne | zwinąć | inicjał | dziedziczyć

Uwagi

promień granicy

Właściwość border-radius pozwala zmienić kształt podstawowego modelu pudełka.

Każdy narożnik elementu może mieć maksymalnie dwie wartości, dla promienia pionowego i poziomego tego narożnika (dla maksymalnie 8 wartości).

Pierwszy zestaw wartości określa promień poziomy. Opcjonalny drugi zestaw wartości, poprzedzony znakiem „/”, określa promień pionowy. Jeśli podano tylko jeden zestaw wartości, jest on używany zarówno dla promienia pionowego, jak i poziomego.

border-radius: 10px 5% / 20px 25em 30px 35em;

10 10px to promień poziomy górnego lewego i dolnego prawego. A 5% to promień poziomy górnego prawego i dolnego lewego. Pozostałe cztery wartości po „/” to promienie pionowe dla górnego lewego, górnego prawego, dolnego prawego i dolnego lewego.

Podobnie jak w przypadku wielu właściwości CSS, skrótów można używać dla dowolnej lub wszystkich możliwych wartości. W związku z tym możesz podać dowolną wartość od jednej do ośmiu wartości. Poniższy skrót pozwala ustawić promień poziomy i pionowy każdego rogu na tę samą wartość:

HTML:

<div class='box'></div>

CSS:

.box {
    width: 250px;
    height: 250px;
    background-color: black;
    border-radius: 10px;
}

Promień krawędzi jest najczęściej używany do konwertowania elementów ramek na koła. Po ustawieniu promienia granicy na połowę długości elementu kwadratowego tworzony jest element okrągły:

.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
}

Ponieważ promień granicy przyjmuje wartości procentowe, często stosuje się 50%, aby uniknąć ręcznego obliczania wartości promienia granicy:

.circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

Jeśli właściwości szerokości i wysokości nie są równe, uzyskany kształt będzie owalny, a nie okrąg.

Przykładowy promień obramowania dla konkretnej przeglądarki:

  -webkit-border-top-right-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius-topright: 4px;
  -moz-border-radius-bottomright: 4px;
  -moz-border-radius-bottomleft: 0;
  -moz-border-radius-topleft: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;

styl graniczny

Właściwość border-style ustawia styl granicy elementu. Ta właściwość może mieć od jednej do czterech wartości (dla każdej strony elementu jedna wartość).

Przykłady:

border-style: dotted;

border-style: dotted solid double dashed;

border-style może również mieć wartości none i hidden . Mają ten sam efekt, z wyjątkiem hidden prac dotyczących rozwiązywania konfliktów granicznych dla elementów <table> . W <table> z wieloma ramkami none ma najniższego priorytetu (co oznacza konflikt, obramowanie będzie pokazywane), a hidden ma najwyższy priorytet (co oznacza konflikt, granica nie będzie pokazywana).

granica (stenografia)

W większości przypadków chcesz zdefiniować kilka właściwości obramowania ( border-width border-style border-color ) dla wszystkich stron elementu.

Zamiast pisać:

border-width: 1px;
border-style: solid;
border-color: #000;

Możesz po prostu napisać:

border: 1px solid #000;

Te skróty są również dostępne dla każdej strony elementu: border-top , border-left , border-right i border-bottom . Możesz więc zrobić:

border-top: 2px double #aaaaaa;

obraz granicy

Dzięki właściwości border-image masz możliwość ustawienia obrazu, który będzie używany zamiast normalnych stylów ramek.

Obraz border-image zasadniczo składa się z

• border-image-source : Ścieżka do używanego obrazu
• border-image-slice : Określa przesunięcie używane do podziału obrazu na dziewięć regionów (cztery rogi , cztery krawędzie i środek )
• border-image-repeat : Określa sposób skalowania obrazów boków i środka obrazu granicy

Rozważ następujący przykład: wheras border.png to obraz o wymiarach 90 x 90 pikseli:

border-image: url("border.png") 30 stretch;

Obraz zostanie podzielony na dziewięć regionów o wymiarach 30 x 30 pikseli. Krawędzie zostaną użyte jako rogi ramki, a strona zostanie użyta pomiędzy. Jeśli element jest większy / szerszy niż 30 pikseli, ta część obrazu zostanie rozciągnięta . Środkowa część obrazu jest domyślnie przezroczysta.

border- [left | right | top | bottom]

Właściwość border-[left|right|top|bottom] służy do dodawania ramki do określonej strony elementu.

Na przykład, jeśli chcesz dodać ramkę do lewej strony elementu, możesz:

#element {
    border-left: 1px solid black;
}

zawalenie się granicy

Właściwość border-collapse dotyczy tylko table s (i elementów wyświetlanych jako display: table lub inline-table ) i określa, czy granice tabeli są zwinięte w jedną ramkę, czy odłączone jak w standardowym HTML.

table {
  border-collapse: separate; /* default */
  border-spacing: 2px; /* Only works if border-collapse is separate */
}

Zobacz także Tabele - wpis dokumentacji zwinięcia granicy

Wiele granic

Za pomocą konspektu:

.div1{
  border: 3px solid black; 
  outline: 6px solid blue;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Korzystanie z cienia:

.div2{
  border: 5px solid green; 
  box-shadow: 0px 0px 0px 4px #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}

Za pomocą pseudoelementu:

.div3 {
  position: relative;
  border: 5px solid #000;
  width: 100px;
  height: 100px;
  margin: 20px;
}
.div3:before {
  content: " ";
  position: absolute;
  border: 5px solid blue;
  z-index: -1;
  top: 5px;
  left: 5px;
  right: 5px;
  bottom: 5px;
}

http://jsfiddle.net/MadalinaTn/bvqpcohm/2/

Tworzenie wielokolorowej ramki za pomocą obrazu granicy

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

Powyższy przykład wytworzyłby ramkę składającą się z 5 różnych kolorów. Kolory są definiowane za pomocą linear-gradient (więcej informacji na temat gradientów można znaleźć w dokumentacji ). Więcej informacji na temat właściwości border-image-slice można znaleźć w przykładzie border-image na tej samej stronie.

( Uwaga: Dodatkowe właściwości zostały dodane do elementu w celu prezentacji ).

Zauważysz, że lewa ramka ma tylko jeden kolor (kolor początkowy gradientu), podczas gdy prawa ramka ma tylko jeden kolor (kolor końcowy gradientu). Wynika to ze sposobu, w jaki działa właściwość obrazu obramowania. To tak, jakby gradient został zastosowany do całego pola, a następnie kolory są maskowane z obszarów wypełnienia i zawartości, dzięki czemu wygląda tak, jakby tylko krawędź miała gradient.

To, które obramowania mają jeden kolor, zależy od definicji gradientu. Jeśli gradient jest to right , lewa ramka będzie kolorem początkowym gradientu, a prawa ramka będzie kolorem końcowym. Jeśli byłby to gradient to bottom górna ramka byłaby kolorem początkowym gradientu, a dolna ramka byłaby kolorem końcowym. Poniżej przedstawiono wynik gradientu w kolorze to bottom 5 z to bottom .

Jeśli obramowanie jest wymagane tylko na określonych bokach elementu, właściwość border-width może być używana tak samo, jak w przypadku każdej innej normalnej granicy. Na przykład dodanie poniższego kodu spowoduje utworzenie ramki tylko na górze elementu.

border-width: 5px 0px 0px 0px;

Zauważ, że jakikolwiek element, który ma właściwość border-image , nie będzie respektował border-radius (tzn. Granica nie zakrzywi się). Jest to oparte na poniższym stwierdzeniu w specyfikacji:

Tła ramki, ale nie ich obramowanie, są przycinane do odpowiedniej krzywej (określonej przez „klip tła”).