Wartość nieruchomości w rodzimej przerywanej granicy nie zapewnia kontroli nad samymi kreskami ... więc przynieś border-image
nieruchomość!
Zaparz własną granicę z border-image
Kompatybilność : Oferuje doskonałą obsługę przeglądarek (IE 11 i wszystkie nowoczesne przeglądarki). Normalne obramowanie można ustawić jako rezerwę dla starszych przeglądarek.
Stwórzmy je
Te obramowania będą wyświetlać dokładnie to samo w różnych przeglądarkach!
Krok 1 - Utwórz odpowiedni obraz
Ten przykład ma 15 pikseli szerokości i 15 pikseli wysokości, a przerwy mają obecnie szerokość 5 pikseli. Jest to plik .png z przezroczystością.
Tak to wygląda w Photoshopie po powiększeniu:
Oto jak wygląda skalowanie:
Kontrolowanie odstępu i długości skoku
Aby utworzyć szersze / krótsze przerwy lub kreski, poszerz / skróć przerwy lub kreski na obrazie.
Oto obraz z szerszymi przerwami 10px:
poprawnie wyskalowane =
Krok 2 - Utwórz CSS - ten przykład wymaga 4 podstawowych kroków
Zdefiniuj border-image-source :
border-image-source:url("http://i.stack.imgur.com/wLdVc.png");
Opcjonalnie - zdefiniuj border-image-width :
border-image-width: 1;
Wartość domyślna to 1. Można ją również ustawić za pomocą wartości piksela, wartości procentowej lub jako inną wielokrotność (1x, 2x, 3x itd.). To przesłania dowolny border-width
zestaw.
Zdefiniuj border-image-slice :
W tym przykładzie grubość górnej, prawej, dolnej i lewej krawędzi obrazów wynosi 2 piksele, a poza nimi nie ma przerwy, więc wartość naszego wycinka to 2:
border-image-slice: 2;
Plasterki wyglądają tak, 2 piksele od góry, prawej, dołu i lewej:
Zdefiniuj powtarzanie obramowania obrazu :
W tym przykładzie chcemy, aby wzorzec powtarzał się równomiernie wokół naszego elementu div. Więc wybieramy:
border-image-repeat: round;
Pisanie stenografii
Powyższe właściwości można ustawić indywidualnie lub w skrócie za pomocą border-image :
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
Kompletny przykład
Zwróć uwagę na border: dashed 4px #000
rezerwę. Nieobsługiwane przeglądarki otrzymają tę ramkę.
.bordered {
display: inline-block;
padding: 20px;
/* Fallback dashed border
- the 4px width here is overwritten with the border-image-width (if set)
- the border-image-width can be omitted below if it is the same as the 4px here
*/
border: dashed 4px #000;
/* Individual border image properties */
border-image-source: url("http://i.stack.imgur.com/wLdVc.png");
border-image-slice: 2;
border-image-repeat: round;
/* or use the shorthand border-image */
border-image: url("http://i.stack.imgur.com/wLdVc.png") 2 round;
}
/*The border image of this one creates wider gaps*/
.largeGaps {
border-image-source: url("http://i.stack.imgur.com/LKclP.png");
margin: 0 20px;
}
<div class="bordered">This is bordered!</div>
<div class="bordered largeGaps">This is bordered and has larger gaps!</div>
border-style: solid
(lub coś podobnego), jeśli pominiesz rezerwę.Oprócz
border-image
właściwości istnieje kilka innych sposobów tworzenia przerywanej granicy z kontrolą długości pociągnięcia i odległości między nimi. Zostały opisane poniżej:Metoda 1: Korzystanie z formatu SVG
Kreskowaną ramkę możemy utworzyć, używając elementu
path
lub apolygon
i ustawiającstroke-dasharray
właściwość. Właściwość przyjmuje dwa parametry, z których jeden określa rozmiar myślnika, a drugi określa odstęp między nimi.Plusy:
border-radius
zaangażowany. W tej odpowiedzi po prostu zastąpilibyśmypath
znak „circle
like” (lub) zamieniając go na okrąg.path
Cons:
vector-effect='non-scaling-stroke'
(jak w drugim polu), ale przeglądarka nie obsługuje tej właściwości w IE.Pokaż fragment kodu
Metoda 2: Korzystanie z gradientów
Możemy użyć wielu
linear-gradient
obrazów tła i odpowiednio je ustawić, aby uzyskać efekt przerywanej granicy. Można to również zrobićrepeating-linear-gradient
za pomocą gradientu, ale nie ma dużej poprawy, ponieważ używa się powtarzającego się gradientu, ponieważ każdy gradient powinien być powtarzany tylko w jednym kierunku.Pokaż fragment kodu
Plusy:
Cons:
border-radius
jest zaangażowany, ponieważ tła nie są zakrzywione na podstawieborder-radius
. Zamiast tego są przycinane.Metoda 3: Cienie w pudełku
Możemy stworzyć mały pasek (w kształcie myślnika) za pomocą pseudoelementów, a następnie stworzyć wiele jego
box-shadow
wersji, aby stworzyć obramowanie jak na poniższym fragmencie.Jeśli kreska ma kształt kwadratu, wystarczy jeden pseudoelement, ale jeśli jest to prostokąt, potrzebowalibyśmy jednego pseudoelementu na górną i dolną krawędź, a drugiego na lewą i prawą krawędź. Dzieje się tak, ponieważ wysokość i szerokość kreski na górnej krawędzi będą inne niż po lewej stronie.
Plusy:
Cons:
border-radius
ale ich pozycjonowanie byłoby bardzo trudne w przypadku konieczności znalezienia punktów na okręgu (a może nawettransform
).Pokaż fragment kodu
źródło
pointer-events:none
do SVG w celu umożliwienia interakcji z zawartością.Krótko mówiąc: nie, nie jest. Zamiast tego będziesz musiał pracować z obrazami.
źródło
Jest fajne narzędzie stworzone przez @kovart o nazwie generator przerywanej granicy .
Używa svg jako obrazu tła, aby umożliwić ustawienie żądanej tablicy kresek obrysu i jest całkiem wygodne.
Następnie użyłbyś go po prostu jako właściwości tła w swoim elemencie zamiast obramowania:
źródło
Długość pociągnięcia zależy od szerokości pociągnięcia. Możesz zwiększyć długość, zwiększając szerokość i ukryć część obramowania za pomocą elementu wewnętrznego.
https://jsfiddle.net/ok6srt2z/
źródło
pointer-events: none
aby zapobiec problemowi z nakładką.Niedawno miałem ten sam problem.
Udało mi się to rozwiązać z dwoma absolutnie ustawionymi divami niosącymi obramowanie (jeden dla poziomej i jeden dla pionu), a następnie je przekształcić. Po prostu zewnętrzne pudełko musi być ustawione względnie.
Uwaga: w tym przykładzie użyłem tachionów, ale wydaje mi się, że te zajęcia nie wymagają wyjaśnień.
źródło
Spowoduje to utworzenie pomarańczowo-szarej ramki przy użyciu class = "myclass" elementu div.
źródło