Korzystanie z pseudoelementów
Możesz umieścić pseudoelement w taki sposób, aby znajdował się za elementem i był większy, tworząc efekt obramowania z własnym tłem lub mniejszy i wewnątrz (ale upewnij się, że zawartość zostanie umieszczona na górze).
Element wymagający wielu obramowań powinien mieć własne obramowanie i względne położenie.
.borders ( position: relative; border: 5px solid #f00; )Ramka pomocnicza jest dodawana z pseudoelementem. Jest ustawiany za pomocą pozycjonowania bezwzględnego i wstawiania wartościami góra / lewo / dół / prawo. Będzie to również miało obramowanie i jest przechowywane pod treścią (zachowując na przykład możliwość wyboru tekstu i klikalności linków), nadając mu ujemną wartość z-index. Ostrożnie z ujemnym indeksem z, jeśli znajduje się w jeszcze innym elemencie z własnym kolorem tła, może to nie działać.
.borders:before ( content: " "; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; )Zobacz Pen gbgRqZ autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Możesz również zrobić trzecie obramowanie używając :afterpseudoklasy. Zwróć szczególną uwagę, że Firefox 3 (przed 3.6) to naprawia, obsługując :afteri :before, ale nie pozwalając na ich absolutne pozycjonowanie (więc wygląda to dziwnie).
Korzystanie z konspektu
Chociaż jest nieco bardziej ograniczony niż obramowanie (obejmuje cały element bez względu na wszystko), kontur jest dodatkową wolną ramką.
.borders ( border: 5px solid blue; outline: 5px solid red; )Korzystanie z box-shadow
Możesz użyć cienia pola, aby uzyskać efekt obramowania, wykonując przesunięcie cienia i mając 0 rozmycia. Dodatkowo, rozdzielając wartości przecinkami, możesz mieć tyle „obramowań”, ile chcesz:
.blur ( box-shadow: 0 0 0 10px hsl(0, 0%, 80%), 0 0 0 15px hsl(0, 0%, 90%); )Zobacz Pen xbgreX autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.
Korzystanie z obciętego tła
Możesz zatrzymać tło elementu przed wypełnieniem. W ten sposób zwykłe obramowanie elementów może w pewnym sensie wyglądać jak podwójne obramowanie.
.borders ( border: solid 1px #f06d06; padding: 5px; background-clip: content-box; /* support: IE9+ */ background-color: #ccc; )Na wejściu:
Zobacz efekt podwójnej ramki Pen przez Chris Coyier (@chriscoyier) na CodePen.