Bagaimana memberi border ke elemen apapun menggunakan css tanpa menambahkan border-width ke seluruh lebar elemen?

Bagaimana memberi border ke elemen apapun menggunakan css tanpa menambahkan border-width ke seluruh lebar elemen?

Seperti di Photoshop kita bisa memberikan stroke- Inside, center dan outside

Saya pikir properti default css border adalah center seperti center di photoshop, benar kan?

Saya ingin memberi border di dalam kotak bukan di luar. dan tidak ingin menyertakan lebar batas dalam lebar kotak.

outline:1px solid white;

Ini tidak akan menambah lebar dan tinggi ekstra.

Lihat ukuran kotak CSS ...

Properti CSS3 ukuran kotak dapat melakukan ini. Nilai border-box (sebagai lawan dari content-box default) membuat kotak yang dirender akhir menjadi lebar yang dinyatakan, dan setiap border dan padding dipotong di dalam kotak. Sekarang Anda dapat dengan aman mendeklarasikan elemen Anda dengan lebar 100%, termasuk padding dan border berbasis piksel, dan mencapai tujuan Anda dengan sempurna.

• -webkit-box-sizing: border-box; / * Safari / Chrome, WebKit lainnya * /
• -moz-box-sizing: border-box; / * Firefox, Tokek lain * /
• ukuran kotak: border-box; / * Opera / IE 8+ * /

Saya sarankan membuat mixin untuk menangani ini untuk Anda. Anda dapat menemukan informasi lebih lanjut tentang ukuran kotak di W3c http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Bergantung pada dukungan browser yang Anda inginkan, Anda dapat menggunakan box-shadowproperti.

Anda dapat mengatur nilai blur ke 0 dan penyebaran ke ketebalan apa pun yang Anda cari. Hal yang hebat tentang bayangan kotak adalah Anda dapat mengontrol apakah itu digambar di luar (secara default) atau di dalam (menggunakaninset properti).

Contoh:

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

atau

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

Satu keuntungan besar menggunakan bayangan kotak adalah Anda bisa berkreasi dengan menggunakan beberapa bayangan kotak:

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

Satu-satunya hal yang tidak dapat saya katakan adalah perbedaan apa yang akan membuat performa rendering menjadi bijaksana. Saya akan berasumsi itu mungkin menjadi masalah jika Anda memiliki ratusan elemen yang menggunakan teknik ini di layar sekaligus.

Saya mengalami masalah yang sama.

.right-border {
    position: relative;
}

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

Jawaban ini memungkinkan Anda menentukan satu sisi. Dan akan bekerja di IE8 + - tidak seperti menggunakan box-shadow.

Tentu saja ubah properti elemen pseudo Anda karena Anda perlu memilih sisi tertentu.

* Baru dan ditingkatkan *

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

Ini memungkinkan kemampuan untuk menggunakan border dan mengenai beberapa sisi kotak.

Gunakan box-sizing: border-boxuntuk membuat perbatasan DI DALAM div tanpa mengubah lebar div.

Gunakan outlineuntuk membuat perbatasan DI LUAR div tanpa mengubah lebar div.

Berikut contohnya: https://jsfiddle.net/4000cae9/1/

Catatan: border-boxsaat ini tidak didukung oleh IE

Dukung:

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>

Seperti yang dikatakan abenson, Anda dapat menggunakan garis besar tetapi satu gotcha adalah bahwa Opera mungkin menggambar "bentuk non-persegi panjang". Opsi lain yang tampaknya berhasil adalah menggunakan margin negatif, seperti css ini:

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

}

Dengan html ini:

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

Satu opsi kurang bersih lainnya adalah menambahkan markup ekstra ke html. Misalnya, Anda mengatur lebar elemen luar dan menambahkan batas ke bagian dalam. CSS:

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

Dan html:

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

Gunakan bantalan jika tidak ada pembatas. Hapus padding jika ada pembatas.

.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;
}

Pada dasarnya, ganti saja padding 2px dengan batas 2px. Ukuran Div tetap sama.

Dalam kasus Anda, dapatkah Anda memalsukannya dengan mengurangi setengah batas dari padding? (-2,5 dari padding jika border Anda lebarnya 5px, Anda tidak boleh memiliki padding negatif jadi untuk mengecilkannya kurangi lebar keseluruhan kotak). Anda dapat menambahkan 2.5px ekstra ke margin untuk menjaga ukuran keseluruhan kotak tetap sama.

Saya benar-benar tidak menyukai saran ini, tetapi saya rasa tidak ada cara untuk menangani ini dengan bersih.

Jadi, Anda mencoba untuk mencapai yang sama seperti bug model kotak IE terkenal ? Itu tidak mungkin. Atau Anda ingin mendukung klien dengan IE hanya di Windows dan memilih doctype yang memaksa IE ke dalam mode quirks .

Pilihan lain, jika warna latar Anda solid:

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
}

garis besar: 3px hitam pekat || border: 3px hitam pekat

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

}

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

<div>
hello world
</div>