Perbedaan antara garis dan perbatasan

Adakah yang tahu perbedaan antara properti 'border' dan 'outline' di CSS? Jika tidak ada perbedaan, lalu mengapa ada dua properti untuk hal yang sama?

Dari: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Properti outline CSS adalah properti yang membingungkan. Ketika Anda pertama kali mempelajarinya, sulit untuk memahami bagaimana itu bahkan berbeda dari properti perbatasan. W3C menjelaskannya sebagai memiliki perbedaan berikut:

1.Outlines tidak memakan ruang.

2.Outlines mungkin non-persegi panjang.

Selain beberapa jawaban lain ... berikut adalah beberapa perbedaan lagi yang dapat saya pikirkan:

1) Sudut membulat

bordermendukung sudut bulat dengan border-radiusproperti. outlinetidak.

div {
  width: 150px;
  height: 150px;
  margin: 20px;
  display: inline-block;
  position: relative;
}

.border {
  border-radius: 75px;
  border: 2px solid green;
}

.outline {
  outline: 2px solid red;
  border-radius: 75px;
  -moz-outline-radius: 75px;
  outline-radius: 75px;
}

.border:after {
content: "border supports rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);

}
.outline:after {
content: "outline doesn't support rounded corners";
position: absolute;
bottom: 0;
transform: translateY(100%);
}

<div class="border"></div>

<div class="outline"></div>

BIOLA

(NB: Meskipun firefox memiliki -moz-outline-radiusproperti yang memungkinkan sudut bulat pada garis besar ... properti ini tidak didefinisikan dalam standar CSS apa pun, dan tidak didukung oleh peramban lain ( sumber ))

2) Hanya menata satu sisi

border memiliki properti untuk setiap sisi gaya border-top:, border-left:dll.

garis besar tidak bisa melakukan ini. Tidak ada outline-top: dll. Semuanya atau tidak sama sekali. (lihat posting SO ini )

3) offset

outline mendukung offset dengan properti outline-offset . perbatasan tidak.

.outline {
  margin: 100px;
  width: 150px;
  height: 150px;
  outline-offset: 20px;
  outline: 2px solid red;
  border: 2px solid green;
  background: pink;
}

<div class="outline"></div>

BIOLA

Catatan: Semua dukungan browser utama outline-offsetkecuali Internet Explorer

Lebih jauh ke jawaban lain, garis besar biasanya digunakan untuk debugging. Opera memiliki beberapa gaya CSS pengguna yang bagus yang menggunakan properti outline untuk menunjukkan kepada Anda di mana semua elemen dalam dokumen.

Jika Anda mencoba mencari tahu mengapa suatu elemen tidak muncul di tempat yang Anda harapkan atau pada ukuran yang Anda harapkan, tambahkan beberapa garis besar dan lihat di mana elemen-elemen itu berada.

Seperti yang telah disebutkan, garis besar tidak memakan tempat. Saat Anda menambahkan perbatasan, lebar / tinggi total elemen dalam dokumen meningkat, tetapi itu tidak terjadi dengan garis besar. Anda juga tidak dapat menetapkan garis pada sisi tertentu seperti perbatasan; itu semua atau tidak sama sekali.

tldr;

W3C menjelaskannya sebagai memiliki perbedaan berikut:

• Garis tidak memakan ruang.
• Garis mungkin non-persegi panjang.

Sumber

Garis besar harus digunakan untuk aksesibilitas

Perlu juga dicatat bahwa tujuan utama garis besar adalah aksesibilitas. Mengaturnya menjadi garis besar: tidak ada yang harus dihindari.

Jika Anda harus menghapusnya, mungkin merupakan ide yang lebih baik untuk memberikan gaya alternatif:

Saya telah melihat beberapa tips tentang cara menghapus indikator fokus dengan menggunakan garis besar: tidak ada atau garis besar: 0. Tolong jangan lakukan ini, kecuali jika Anda mengganti garis dengan sesuatu yang lain yang membuatnya mudah untuk melihat elemen mana yang memiliki fokus keyboard. Menghapus indikator visual dari fokus papan ketik akan membuat orang-orang yang bergantung pada navigasi papan ketik kesulitan menavigasi dan menggunakan situs Anda.

Sumber: "Jangan Hapus Outline dari Tautan dan Kontrol Bentuk", 365 Berea Street

Sumber Daya Lebih Banyak

• http://outlinenone.com/

Penggunaan praktis garis besar berkaitan dengan transparansi. Jika Anda memiliki elemen induk dengan latar belakang, tetapi ingin garis batas elemen anak transparan agar latar belakang induknya terlihat, Anda harus menggunakan "garis besar" daripada "batas". Sementara perbatasan bisa transparan, itu akan menunjukkan latar belakang anak, bukan orang tua.

Dengan kata lain, pengaturan ini menciptakan efek berikut:

outline: 7px solid rgba(255, 255, 255, 0.2);

Dari Situs Sekolah W3

Properti perbatasan CSS memungkinkan Anda menentukan gaya dan warna batas elemen.

Sebuah garis adalah garis yang ditarik sekitar elemen (luar perbatasan) untuk membuat elemen "menonjol".

Properti steno garis besar menetapkan semua properti kerangka dalam satu deklarasi.

Properti yang dapat diatur, adalah (berurutan): outline-color, outline-style, outline-width.

Jika salah satu nilai di atas tidak ada, mis. "Outline: solid # ff0000;", nilai default untuk properti yang hilang akan dimasukkan, jika ada.

Periksa di sini untuk informasi lebih lanjut: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

Sedikit pertanyaan lama, tetapi perlu disebutkan bug rendering Firefox (masih ada pada Januari '13) di mana garis besar akan membuat di luar semua elemen anak bahkan jika mereka melimpahi orang tua mereka (melalui margin negatif, bayangan kotak) , dll.)

Anda dapat memperbaikinya dengan:

.container {
    position: relative;
}
.container:before {
   content: '';
   margin: 0;
   padding: 0;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   outline: 1px solid #ff0000;
}

Sangat disayangkan bahwa itu masih belum diperbaiki. Saya lebih suka menguraikan dalam banyak kasus karena mereka tidak menambah dimensi elemen, menyelamatkan Anda dari selalu harus mempertimbangkan lebar perbatasan ketika mengatur dimensi elemen.

Lagi pula, mana yang lebih sederhana?

.container {
    width: 960px;
    height: 300px;
    outline: 3px solid black;
}

Atau:

.container {
    width: 954px;
    height: 294px;
    border: 3px solid black;
}

Perlu juga dicatat, bahwa garis besar W3C adalah perbatasan IE, karena IE tidak menerapkan model kotak W3C.

Dalam model kotak w3c, batas tidak termasuk lebar dan tinggi elemen. Dalam IE itu inklusif.

Saya telah membuat sedikit kode css / html hanya untuk melihat perbedaan antara keduanya.

outlinelebih baik untuk memasukkan elemen-elemen anak yang berpotensi meluap, terutama ke dalam wadah sejajar .

borderjauh lebih disesuaikan untuk elemen blok- berperilaku.

Biola untuk Anda, Tuan!

Properti outline di CSS menarik garis di luar elemen. Ini mirip dengan perbatasan kecuali:

• Itu selalu terjadi di semua sisi, Anda tidak dapat menentukan tertentu
• sisi Ini bukan bagian dari model kotak, sehingga tidak akan mempengaruhi
  posisi elemen atau elemen yang berdekatan

Sumber: https://css-tricks.com/almanac/properties/o/outline/

Sebagai contoh praktis menggunakan "garis besar", batas bertitik samar yang mengikuti fokus sistem pada laman web (mis. Jika Anda membuka tab tautan) dapat dikontrol menggunakan properti kerangka (setidaknya, saya tahu itu bisa di Firefox , belum mencoba peramban lain).

Teknik "penggantian gambar" yang umum digunakan, misalnya:

<div id="logo"><a href="/">Foo Widgets Ltd.</a></div>

dengan yang berikut di CSS:

#logo
{
    background: url(/images/logo.png) center center no-repeat;
}
#logo a
{
    display: block;
    text-indent: -1000em;
}

Masalahnya adalah bahwa ketika fokus mencapai tag, outline mengarah 1000em ke kiri. Garis besar dapat memungkinkan Anda mematikan garis fokus pada elemen-elemen tersebut.

Saya percaya bahwa Toolbar Pengembang IE juga menggunakan sesuatu seperti garis besar "di bawah tenda" ketika menyorot elemen untuk diperiksa dalam mode "pilih". Itu menunjukkan fakta bahwa "garis besar" tidak memakan tempat.

berpikir tentang garis besar sebagai batas yang proyektor gambar di luar sesuatu sebagai batas adalah objek aktual di sekitar benda itu.
sebuah proyeksi dapat dengan mudah tumpang tindih tetapi perbatasan tidak membiarkan Anda lewat.
beberapa kali ketika saya menggunakan grid+%width, perbatasan akan mengubah skala pada port tampilan, misalnya div dengan width:100%di orangtua dengan width:100pxmengisi induk sepenuhnya, tetapi ketika saya menambahkan border:solid 5pxdiv itu membuat div lebih kecil untuk membuat ruang untuk perbatasan (meskipun jarang dan work-aroundable!)
tetapi dengan outline itu tidak memiliki masalah ini karena outline lebih virtual: D itu hanya garis di luar elemen tetapi masalahnya adalah jika Anda tidak melakukan spasi dengan benar itu akan tumpang tindih dengan konten lain.

untuk membuatnya singkat:
garis besar pro:
tidak mengacaukan dengan spasi dan posisi
kontra:
kesempatan tinggi tumpang tindih

Perbedaan antara batas dan garis besar:

Perbatasan adalah bagian dari model kotak sehingga diperhitungkan terhadap ukuran elemen. Garis besar bukan bagian dari model kotak sehingga tidak mempengaruhi elemen terdekat.

Demo:

#border {
  border: 10px solid black;
}
#outline {
  outline: 10px solid black;
}

<html>
<body>
<span id="border">Border</span>Other text<br><br>
<span id="outline">Outline</span>Other text
</body>
</html>

Disalin dari W3Schools:

Definisi dan Penggunaan

Garis besar adalah garis yang ditarik di sekitar elemen (di luar perbatasan) untuk membuat elemen "menonjol".