Jak ustawić grubość obramowania w procentach?

Jak ustawić szerokość obramowania elementu w procentach? Wypróbowałem składnię

border-width:10%;

Ale to nie działa.

Powodem, dla którego chcę ustawić border-widthw procentach, jest to, że mam element z width: 80%;i height: 80%;i chcę, aby element obejmował całe okno przeglądarki, więc chcę ustawić wszystkie obramowania na 10%. Nie robię tego metodą dwóch elementów, w której jeden byłby umieszczony za drugim i działałby jak obramowanie, ponieważ tło elementu jest przezroczyste, a umieszczenie elementu za nim wpłynęłoby na jego przezroczystość.

Wiem, że można to zrobić za pomocą JavaScript, ale szukam metody tylko dla CSS, jeśli to w ogóle możliwe.

Obramowanie nie obsługuje procentu ... ale nadal jest możliwe ...

Jak inni wskazywali na specyfikację CSS , procenty nie są obsługiwane na granicach:

'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width'
  Value:          <border-width> | inherit
  Initial:        medium
  Applies to:     all elements
  Inherited:      no
  Percentages:    N/A
  Media:          visual
  Computed value: absolute length; '0' if the border style is 'none' or 'hidden'

Jak widać, jest napisane Procenty: nie dotyczy .

Rozwiązanie nieskryptowe

Możesz zasymulować granice procentowe za pomocą elementu opakowania, w którym:

1. ustaw element opakowania na background-colorpożądany kolor obramowania
2. ustaw element opakowania padding w procentach (ponieważ są obsługiwane)
3. ustaw swoje elementy background-colorna białe (lub cokolwiek to ma być)

To w jakiś sposób symulowałoby granice procentowe. Poniżej przedstawiono przykład elementu 25% szerokości bocznych granicach , który wykorzystuje tę technikę.

HTML użyty w przykładzie

.faux-borders {
    background-color: #f00;
    padding: 1px 25%; /* set padding to simulate border */
}
.content {
    background-color: #fff;
}

<div class="faux-borders">
    <div class="content">
        This is the element to have percentage borders.
    </div>
</div>

Problem: Musisz zdawać sobie sprawę, że będzie to znacznie bardziej skomplikowane, gdy Twój element będzie miał zastosowane jakieś złożone tło ... Zwłaszcza jeśli to tło jest dziedziczone z hierarchii DOM nadrzędnej. Ale jeśli Twój interfejs użytkownika jest wystarczająco prosty, możesz to zrobić w ten sposób.

Rozwiązanie skryptowe

@BoltClock wspomniał o rozwiązaniu skryptowym którym można programowo obliczyć szerokość obramowania w zależności od rozmiaru elementu.

To taki przykład z niezwykle prostym skryptem wykorzystującym jQuery.

var el = $(".content");
var w = el.width() / 4 | 0; // calculate & trim decimals
el.css("border-width", "1px " + w + "px");

.content { border: 1px solid #f00; }

<div class="content">
    This is the element to have percentage borders.
</div>

Ale musisz mieć świadomość, że będziesz musiał dostosować szerokość obramowania za każdym razem, gdy zmieni się rozmiar kontenera (np. Zmiana rozmiaru okna przeglądarki). Moje pierwsze obejście z elementem wrapper wydaje się znacznie prostsze, ponieważ automatycznie dostosowuje szerokość w takich sytuacjach.

Pozytywną stroną rozwiązania skryptowego jest to, że nie ma problemów w tle, o których wspomniałem w moim poprzednim rozwiązaniu nieskryptowym.

Możesz także użyć

border-left: 9vw solid #F5E5D6;
border-right: 9vw solid #F5E5D6;     

LUB

border: 9vw solid #F5E5D6;

To jest starsze pytanie, ale dla tych, którzy wciąż szukają odpowiedzi, właściwość CSS Box-Sizing jest tutaj bezcenna:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit  */
-moz-box-sizing: border-box;    /* Firefox, other Gecko         */
box-sizing: border-box; 

Oznacza to, że możesz ustawić szerokość elementu DIV na wartość procentową, a każda ramka dodana do elementu DIV będzie uwzględniona w tym procencie. Na przykład poniższy tekst doda obramowanie 1 piksela do wewnętrznej szerokości elementu div:

div { box-sizing:border-box; width:50%; border-right:1px solid #000; }         

Jeśli chcesz uzyskać więcej informacji: http://css-tricks.com/box-sizing/

Wartości procentowe nie mają zastosowania do border-width w CSS. Jest to wymienione w specyfikacji .

Będziesz musiał użyć JavaScript, aby obliczyć procent szerokości elementu lub jakąkolwiek potrzebną długość, i zastosować wynik w pxlub podobnie do krawędzi elementu.

Możesz użyć em jako procent zamiast pikseli,

Przykład:

border:10PX dotted #c1a9ff; /* In Pixels */
border:0.75em dotted #c1a9ff; /* Exact same as above in Percentage */

Nowoczesne przeglądarki obsługują jednostki vh i vw , które stanowią procent obszaru wyświetlania okna.

Więc możesz mieć czyste obramowanie CSS jako procent rozmiaru okna:

border: 5vw solid red;

Wypróbuj ten przykład i zmień szerokość okna; obramowanie zmieni grubość wraz ze zmianą rozmiaru okna. box-sizing: border-box;może się też przydać.

Rozmiar pudełka
ustaw rozmiar ramki na obramowanie box-sizing: border-box;i ustaw szerokość na 100% i stałą szerokość obramowania, a następnie dodaj minimalną szerokość, aby w przypadku małego ekranu obramowanie nie obejmowało całego ekranu

Możesz utworzyć niestandardową ramkę za pomocą rozpiętości. Stwórz rozpiętość z klasą (określając kierunek, w którym zmierza granica) i id:

<html>
    <body>
        <div class="mdiv">
            <span class="VerticalBorder" id="Span1"></span>
            <header class="mheader">
                <span class="HorizontalBorder" id="Span2"></span>
            </header>
        </div>
    </body>
</html>

Następnie przejdź do ciebie CSS i ustawić klasę, do position:absolute, height:100%(do pionowego granicy), width:100%(dla granic pozioma), margin:0%a background-color:#000000;. Dodaj wszystko, co jest konieczne:

body{
    margin:0%;
}

div.mdiv{
    position:absolute;
    width:100%;
    height:100%;
    top:0%;
    left:0%;
    margin:0%;
}

header.mheader{
    position:absolute;
    width:100%;
    height:20%; /* You can set this to whatever. I will use 20 for easier calculations. You don't need a header. I'm using it to show you the difference. */
    top:0%;
    left:0%;
    margin:0%;
}

span.HorizontalBorder{
    position:absolute;
    width:100%;
    margin:0%;
    background-color:#000000;
}

span.VerticalBorder{
    position:absolute;
    height:100%;
    margin:0%;
    background-color:#000000;
}

Następnie ustawić identyfikator, który odpowiada class="VerticalBorder"na top:0%;, left:0%;, width:1%;(Ponieważ szerokość mdiv jest równa szerokości mheader na 100%, szerokość będzie wynosić 100% tego, co go ustawić. Jeżeli ustawić szerokość do 1% przed obramowanie będzie wynosić 1% szerokości okna). Ustaw identyfikator, który odpowiada class="HorizontalBorder"na top:99%(Ponieważ jest to w pojemniku nagłówka górna odnosi się do stanowiska, to w zależności od cel. To + wysokość powinny sumować się do 100%, jeżeli chcesz, aby dotrzeć do dna), left:0%;a height:1%(Ponieważ wysokość mdiv jest 5 razy większa niż wysokość mheader [100% = 100, 20% = 20, 100/20 = 5], wysokość będzie wynosić 20% ustawionej wysokości. Jeśli ustawisz wysokość do 1% obramowanie będzie wynosić 0,2% wysokości okna). Oto jak to będzie wyglądać:

span#Span1{
    top:0%;
    left:0%;
    width:.4%;
}
span#Span2{
    top:99%;
    left:0%;
    width:1%;
}

ZRZECZENIE SIĘ: Jeśli zmienisz rozmiar okna na wystarczająco mały, obramowanie zniknie. Rozwiązaniem byłoby ograniczenie rozmiaru obramowania, jeśli rozmiar okna zostanie zmieniony do określonego punktu. Oto co zrobiłem:

window.addEventListener("load", Loaded);

function Loaded() {
  window.addEventListener("resize", Resized);

  function Resized() {
    var WindowWidth = window.innerWidth;
    var WindowHeight = window.innerHeight;
    var Span1 = document.getElementById("Span1");
    var Span2 = document.getElementById("Span2");
    if (WindowWidth <= 800) {
      Span1.style.width = .4;
    }
    if (WindowHeight <= 600) {
      Span2.style.height = 1;
    }
  }
}

Jeśli zrobiłeś wszystko dobrze, powinno to wyglądać tak, jak jest w tym linku: https://jsfiddle.net/umhgkvq8/12/ Z jakiegoś dziwnego powodu granica zniknie w jsfiddle, ale nie jeśli uruchomisz ją w przeglądarce .

Spójrz na specyfikację calc () . Oto przykład użycia:

border-right:1px solid;
border-left:1px solid;
width:calc(100% - 2px);