Jak nadać obramowanie dowolnemu elementowi za pomocą css bez dodawania border-width do całej szerokości elementu?

Jak nadać obramowanie dowolnemu elementowi za pomocą css bez dodawania border-width do całej szerokości elementu?

Podobnie jak w Photoshopie możemy podać obrys - wewnątrz, na środku i na zewnątrz

Myślę, że domyślne właściwości obramowania CSS to środek jak środek w Photoshopie, mam rację?

Chcę umieścić obramowanie wewnątrz pudełka, a nie na zewnątrz. i nie chcesz uwzględniać szerokości obramowania w szerokości pola.

outline:1px solid white;

Nie doda to dodatkowej szerokości i wysokości.

Sprawdź rozmiary CSS ...

Można to zrobić za pomocą właściwości CSS3 rozmiaru pudełka. Wartość border-box (w przeciwieństwie do domyślnej wartości content-box) sprawia, że ​​ostateczna renderowana ramka ma zadeklarowaną szerokość, a wszelkie obramowanie i wypełnienie wycięte wewnątrz ramki. Możesz teraz bezpiecznie zadeklarować 100% szerokości elementu, w tym pikselowe wypełnienie i obramowanie, i perfekcyjnie osiągnąć swój cel.

• -webkit-box-sizing: border-box; / * Safari / Chrome, inny WebKit * /
• -moz-box-sizing: border-box; / * Firefox, inne Gecko * /
• box-size: border-box; / * Opera / IE 8+ * /

Proponuję stworzyć mixin, który poradzi sobie z tym za Ciebie. Więcej informacji na temat rozmiarów pudeł można znaleźć pod adresem W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

W zależności od planowanej obsługi przeglądarki możesz skorzystać z box-shadowwłaściwości.

Możesz ustawić wartość rozmycia na 0, a rozrzut na dowolną grubość. Wspaniałą rzeczą w cieniu pola jest to, że możesz kontrolować, czy jest rysowany na zewnątrz (domyślnie), czy wewnątrz (za pomocą insetwłaściwości).

Przykład:

box-shadow: 0 0 0 1px black; // Outside black border 1px

lub

box-shadow: 0 0 0 1px white inset; // Inside white border 1px

Wielką zaletą korzystania z cienia pudełkowego jest to, że można wykazać się kreatywnością, używając wielu cieni pudełkowych:

box-shadow: 0 0 0 3px black, 0 0 0 1px white inset;

Jedyne, czego nie mogę powiedzieć, to jaka różnica wpłynie na wydajność renderowania. Zakładam, że mogłoby to stać się problemem, gdybyś miał na ekranie jednocześnie setki elementów wykorzystujących tę technikę.

Napotkałem ten sam problem.

.right-border {
    position: relative;
}

.right-border:after {
    content: '';
    display: block;
    position: absolute;
        top: 0; right: 0;
    width: 1px;
    height: 100%;
    background: #e0e0e0;
}

Ta odpowiedź pozwala określić jedną stronę. I działałby w IE8 + - w przeciwieństwie do używania box-shadow.

Oczywiście zmień właściwości pseudoelementów, ponieważ musisz wyodrębnić konkretną stronę.

* Nowe i ulepszone *

&:before {
content: '';
display: block;
position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
border: 1px solid #b7b7b7;
}

Pozwala to na użycie ramki i uderzenie w wiele boków pudełka.

Użyj box-sizing: border-box, aby utworzyć obramowanie WEWNĄTRZ div bez modyfikowania szerokości div.

Służy outlinedo tworzenia obramowania NA ZEWNĄTRZ elementu div bez zmiany jego szerokości.

Tutaj przykład: https://jsfiddle.net/4000cae9/1/

Uwagi: border-boxobecnie nie jest obsługiwane przez IE

Wsparcie:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


<p>Use box-sizing: border-box to create a border INSIDE a div without modifying div width.</p>
<div id="test">border-box</div>
<p>Use outline to create a border OUTSIDE a div without modifying div width.</p>
<div id="test2">outline</div>

Jak powiedział Abenson, możesz użyć konspektu, ale jedną wadą jest to, że Opera może narysować „nieprostokątny kształt”. Inną opcją, która wydaje się działać, jest użycie ujemnych marż, takich jak ten CSS:

div {
  float:left;
  width: 50%;
  border:1px solid black;
  margin: -1px;

}

W tym html:

<body>
  <div>A block</div>
  <div>Another block</div>
</body>

Inną mniej przejrzystą opcją jest dodanie dodatkowych znaczników do kodu HTML. Na przykład ustawiasz szerokość elementu zewnętrznego i dodajesz obramowanie do wewnętrznego. CSS:

.outer { width: 50%; float: left;}
.inner { border: 1px solid black; }

A html:

<body>
  <div class="outer">
    <div class="inner">A block</div>
  </div>
  <div class="outer">
    <div class="inner">Another block</div>
  <div>
</body>

Użyj dopełnienia, gdy nie ma obramowania. Usuń wypełnienie, gdy istnieje obramowanie.

.myDiv {
    width: 100px;
    height: 100px;
    padding-left: 2px;
    padding-right: 2px;
}

.myDiv:hover {
    padding-left: 0;
    padding-right: 0;
    border-left: 2px solid red;
    border-right: 2px solid red;
}

Zasadniczo wystarczy zastąpić wypełnienie 2 pikselami obramowaniami 2 piks. Rozmiar DIV pozostaje taki sam.

Czy w twoim przypadku możesz to sfałszować, odejmując połowę obramowania od wypełnienia? (-2,5 od wypełnienia, jeśli twoja ramka ma szerokość 5 pikseli, nie możesz mieć ujemnego wypełnienia, więc aby zmniejszyć, zmniejsz całkowitą szerokość ramki). Możesz dodać dodatkowe 2,5 piksela do marginesu, aby zachować ogólny rozmiar pudełka.

Naprawdę nie podoba mi się ta sugestia, ale nie sądzę, aby można było to czysto załatwić.

W ten sposób próbujesz osiągnąć ten sam błąd, co dobrze znany błąd modelu pudełkowego przeglądarki IE ? To nie jest możliwe. Lub chcesz obsługiwać klientów z IE tylko w systemie Windows i wybrać typ dokumentu, który zmusza IE do dziwnego trybu .

Inna opcja, jeśli kolor tła jest jednolity:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}

kontur: 3px jednolicie czarny || obramowanie: 3px jednolicie czarne

div{
height:50px;
width:150px;
text-align:center;

}

div{    /*this is what you need ! */
outline:1px solid black
}

<div>
hello world
</div>