6 sposobów na utworzenie podwójnej ramki w CSS

Granice mają kluczowe znaczenie w projektowaniu/rozwoju stron internetowych, ponieważ mogą przyciągać uwagę użytkowników lub oddzielać treści na stronie internetowej. Możesz użyć skrótu obramowania, jeśli chcesz, aby wszystkie cztery obramowania elementu HTML były takie same.

Z drugiej strony możesz również użyć właściwości koloru obramowania, stylu obramowania i właściwości longhand border-width, aby każde obramowanie było inne/niepowtarzalne. Gdy chcesz określić kolor obramowania, użyjemy koloru obramowania, użyjemy szerokości obramowania do określenia szerokości obramowania i określimy, czy obramowanie będzie przerywane, podwójne czy pełne za pomocą właściwości border-style.

Możesz także kierować reklamy na poszczególne granice za pomocą właściwości, takich jak border-block-start i border-top

Podwójna ramka ma miejsce, gdy dwie równoległe linie otaczają element HTML. Dwie linie są oddzielone odstępem, który może pozostać przezroczysty lub wypełniony obrazem lub kolorem tła.

Na przykład możemy mieć przycisk rejestracji/logowania otoczony podwójną ramką.

Dlaczego podwójna granica?

  • Separacja: Możesz użyć podwójnego obramowania, aby zwiększyć czytelność i skanowalność strony internetowej, oddzielając różne elementy HTML. Na przykład możesz zastosować podwójne obramowania, aby oddzielić elementy, takie jak nagłówki, treść i stopki na stronie internetowej.
  • Atrakcyjność wizualna: Możesz użyć różnych/kontrastujących kolorów na podwójnych obramowaniach, aby różne elementy były bardziej atrakcyjne wizualnie.
  • Pokaż hierarchię: możesz wyraźnie rozróżnić ważne i mniej ważne elementy na stronie internetowej za pomocą podwójnych obramowań.
  • Łatwe dostosowywanie: możesz tworzyć spersonalizowane i niepowtarzalne projekty za pomocą podwójnych obramowań. Na przykład możesz zmienić kolor lub szerokość każdej linii.
  • Wyróżnienie: Korzystając z właściwości podwójnego obramowania, możesz zwrócić uwagę na określone łącza lub przyciski na stronie internetowej.

Możesz użyć następujących sposobów, aby utworzyć podwójne obramowanie w CSS.

Korzystanie z właściwości w stylu obramowania

Właściwość border-style ustawia styl czterech krawędzi elementu. W tym przypadku używamy słowa kluczowego double, aby ustawić styl. Kiedy używamy słowa kluczowego double, między dwoma obramowaniami tworzone jest automatyczne wypełnienie.

W celach demonstracyjnych ustawimy szerokość obramowania na 15px. Wybierzemy również kolor naszego obramowania na czerwony i wskażemy styl obramowania jako podwójny.

Kod HTML:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2> Border Property</h2>  </div>

  </body>

</html>

kod CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border-width: 15px;

    border-color: red;

    border-style: double;

  }

Wyjście będzie:

Korzystanie z funkcji linear-gradient().

Ta funkcja ustawia gradient liniowy jako obraz tła. Rezultatem jest stopniowe przejście między dwoma kolorami wzdłuż linii prostej. Używamy słowa kluczowego to, aby zaznaczyć punkt początkowy linii gradientu. Jeśli kolejność nie jest określona, ​​wartością domyślną jest do dołu.

Poniższy kod nadaje naszemu polu szerokość obramowania 7px. Następnie możemy określić gradient liniowy we właściwości tła każdej strony pudełka.

Kod HTML:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>linear-gradient() function</h2>  </div>

  </body>

</html>

kod CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 350px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 7px solid rgb(36, 85, 7);

    background: linear-gradient(to top, #8f0404 7px, transparent 1px), 

    linear-gradient(to bottom, #8f0404 7px, transparent 1px),  

    linear-gradient(to left, #8f0404 7px, transparent 1px),  

    linear-gradient(to right, #8f0404 7px, transparent 1px);  

  }

Wyjście będzie:

Korzystanie z właściwości konturu

Kontur to linia narysowana poza granicami elementu. Osiąga to efekt podwójnej granicy i możemy użyć konturu i pojedynczej granicy. Musimy użyć przesunięcia konturu, aby dodać spację między właściwościami obramowania i konturu.

Kod HTML:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Outline Property</h2>  </div>

  </body>

</html>

kod CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 5px solid red; 

    outline: 5px solid blue;

    outline-offset: -20px;

  }

Wyrenderowana strona będzie wyglądać następująco:

Korzystanie z właściwości box-shadow

Właściwość box-shadow dodaje efekt cienia wokół ramki elementu. Możesz mieć wiele efektów box-shadow oddzielonych przecinkami. Zacznij od upewnienia się, że ustawienia przesunięcia i rozmycia wynoszą zero, a następnie ustaw cienie na odpowiednie rozmiary.

HTML:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Box Shadow Property</h2>  </div>

  </body>

</html>

kod CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    box-shadow:

    0 0 0 5px red,

    0 0 0 10px green;

  }

Wyrenderowana strona będzie wyglądać następująco:

Korzystanie z właściwości klipu tła

Właściwość background-clip określa, jak daleko tło powinno rozciągać się w elemencie. Rozszerzenie może znajdować się na polu obramowania, polu dopełnienia lub polu zawartości.

Kod HTML:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>Background-Clip Property</h2>  </div>

  </body>

</html>

kod CSS:

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 350px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    border: 7px solid rgb(36, 85, 7);

  padding: 5px;

  background-clip: content-box;

  background-color: rgb(238, 152, 130);

}

Wyrenderowana strona będzie wyglądać następująco:

Korzystanie z pseudoelementów

Pseudoelementy, reprezentowane przez selektory ::before i ::after, umożliwiają projektantom stron internetowych stylizowanie części dokumentu HTML bez dodawania znaczników do kodu.

Możemy zilustrować, jak używać pseudoelementów do tworzenia podwójnej ramki za pomocą tego kodu:

Dokument HTML

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

      <link rel="stylesheet" href="https://wilku.top/6-ways-to-create-a-double-border-in-css/./style.css" />

  </head>

  <body>

      <div class="box"> <h2>pseudo property</h2>  </div>

  </body>

</html>

CSS

*{

    padding: 0;

    margin: 0;

    box-sizing: border-box;

  }

  body{

    display: flex;

    justify-content: flex-start;

    gap: 25px;

    padding: 15px;

  }

  div{

    width: 150px;

    height: 100px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

  }

  .box{

    background-color: brown;

  }

  box{

    background-color: rebeccapurple;

    position: relative;

    border: 8px solid red;

  }

  .box::before{

  content: " ";

  position: absolute;

  top: 5px;

  left: 5px;

  right: 5px;

  bottom: 5px;

  border: 8px solid green;

  border-width: 6px;

  border-color: green white green white;

  width: 150px;

  height: 100px;

}

Wyrenderowana strona będzie wyglądać następująco:

Prawdziwe przykłady podwójnego obramowania CSS

Właściwość CSS podwójnego obramowania jest używana w wielu witrynach internetowych. Musisz połączyć właściwość podwójnego obramowania z innymi właściwościami CSS, aby jak najlepiej ją wykorzystać. Poniżej przedstawiono dwa przykłady działania podwójnej granicy;

Przycisk „Koszyk” na Amazon

Amazon to jedna z największych nazw w przestrzeni e-commerce. Jego przycisk koszyka ma podwójne obramowanie CSS dla estetyki wizualnej i zachęca użytkowników do działania.

Podwójne obramowanie pojawia się, gdy użytkownik najedzie kursorem na przycisk „koszyk”. Granice są również widoczne po najechaniu kursorem na menu nawigacyjne Amazon.

Przyciski Mailchimpa

Mailchimp to usługa marketingu e-mailowego, która umożliwia użytkownikom tworzenie, uruchamianie i śledzenie kampanii. Jej strona internetowa wykorzystuje efekty podwójnej ramki w różnych sekcjach. Przyciski rejestracji i logowania mają podwójne obramowania, aby „wytworzyć” poczucie pilności podczas przeglądania przez użytkowników.

Obramowanie w dolnej części tych przycisków pogrubia się, gdy użytkownik przesuwa przez nie kursor.

Sprawdzone metody korzystania z efektu podwójnego obramowania CSS

Łatwo jest dać się ponieść emocjom, gdy używasz podwójnego CSS. Ostatecznym celem jest zapewnienie użytkownikom łatwej nawigacji i podkreślenie głównych obszarów witryny. Postępuj zgodnie z tymi najlepszymi praktykami:

  • Używaj spójnego stylu: jeśli używasz podwójnych obramowań, upewnij się, że styl jest spójny we wszystkich elementach. Na przykład podwójne obramowania mogą być stosowane na przyciskach nawigacji, wezwania do działania i rejestracji/logowania. Jeśli to możliwe, upewnij się, że elementy z podwójnym obramowaniem mają takie same kolory i grubości marginesów.
  • Upewnij się, że te podwójne granice działają na różnych urządzeniach: żyjemy w świecie, w którym ludzie przeglądają strony internetowe ze smartfonów, komputerów i tabletów. Przetestuj, aby upewnić się, że podwójne obramowania są wyświetlane zgodnie z oczekiwaniami na różnych rozmiarach ekranu.
  • Używaj ich oszczędnie: możesz ulec pokusie nadużywania określonego efektu CSS po odkryciu go po raz pierwszy. Jednak podwójny CSS pasuje do różnych elementów na stronie internetowej. Używaj tej właściwości tylko w obszarach, w których wnosi wartość do projektu.

Wniosek

Podkreśliliśmy główne podejścia, których możesz użyć do stworzenia podwójnej ramki w CSS. Wybór podejścia będzie zależał od tego, co chcesz osiągnąć za pomocą podwójnej granicy i twoich preferencji. Możesz zdecydować się na jeden lub kombinację kilku stylów podwójnego obramowania na tej samej stronie.

Możesz sprawdzić te zasoby CSS, aby szczegółowo zrozumieć kaskadowe arkusze stylów.