ฉันควรใช้ 'เส้นขอบ: ไม่มี' หรือ 'เส้นขอบ: 0' หรือไม่

543

วิธีใดในสองวิธีที่เป็นไปตามมาตรฐาน W3C พวกเขาทั้งสองทำงานตามที่คาดไว้ในเบราว์เซอร์หรือไม่

เส้นขอบ: ไม่มี;
เส้นขอบ: 0;

css border

— John Himmelman
แหล่งที่มา

74

ฉันชอบคำถามที่ถูกมองข้ามประเภทนี้

— Christopher Altman

453

ทั้งสองถูกต้อง มันเป็นทางเลือกของคุณ

ฉันชอบborder:0เพราะสั้นกว่า ฉันพบว่าอ่านง่ายกว่า คุณอาจพบว่าnoneอ่านง่ายขึ้น เราใช้ชีวิตอยู่ในโลกแห่งโพสต์โปรเซสเซอร์ที่มีความสามารถสูงดังนั้นฉันขอแนะนำให้คุณใช้สิ่งที่คุณต้องการแล้วเรียกใช้ผ่าน "คอมเพรสเซอร์" ไม่มีสงครามศักดิ์สิทธิ์ที่ควรค่าแก่การต่อสู้ที่นี่

อย่างที่ทุกคนพูดว่าถ้าคุณเขียน CSS การผลิตทั้งหมดของคุณฉันคงไว้ - ตอบเสียงบ่นในความคิดเห็น - มันไม่เจ็บที่จะคำนึงถึงแบนด์วิดท์ การใช้border:0 จะช่วยประหยัดแบนด์วิดท์ในจำนวนที่น้อยที่สุด ด้วยตัวของมันเองที่มีค่าน้อยมาก แต่ถ้าคุณนับทุก ๆ ไบต์คุณจะทำให้เว็บไซต์ของคุณเร็วขึ้น

รายละเอียด CSS2 อยู่ที่นี่ สิ่งเหล่านี้ถูกขยายใน CSS3 แต่ไม่เกี่ยวข้องกับสิ่งนี้

'border'
    Value:      [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
    Initial:    see individual properties
    Applies to:     all elements
    Inherited:      no
    Percentages:    N/A
    Media:      visual
    Computed value:     see individual properties

คุณสามารถใช้การรวมกันของความกว้างสไตล์และสี
ที่นี่ 0กำหนดความกว้างnoneสไตล์ พวกเขามีผลลัพธ์การแสดงผลเหมือนกัน: ไม่มีอะไรแสดง

— Oli
แหล่งที่มา

117

"ถ้าคุณมีปริมาณการใช้งานมากคุณจะสังเกตเห็นความแตกต่าง!" - ฉันสงสัยอย่างมากว่า แม้จะมีผู้เยี่ยมชมล้านคนต่อชั่วโมงความแตกต่างก็แค่ 3MB เท่านั้น และนั่นคือสมมติว่าไม่มีผู้เข้าชมเหล่านั้นที่มีแคช CSS และยังคาดว่าการบีบอัดให้ประโยชน์ 0 ทั้งสองคำสั่งที่ไม่น่าเป็นไปได้มาก ในความเป็นจริงอาจเป็นความแตกต่างไม่กี่ร้อย KB ต่อวันซึ่งโดยทั่วไปแล้วจะเป็น 0 สำหรับไซต์ขนาดใหญ่ ไม่ใช่ว่าฉันคิดว่าborder:noneดีกว่าอย่างใด แต่การใช้สิ่งนี้เป็นเหตุผลของคุณผิดพลาด

— BlueRaja - Danny Pflughoeft

22

@ BlueRaja-DannyPflughoeft มันเป็นการประชดประชันมากกว่าสิ่งอื่น .. ... หรืออติพจน์ ... หรือทั้งสองอย่าง คุณถูกต้องสิ่งนี้จะไม่ส่งผลต่อรันไทม์ต่อสิ่งใดนอกจากคุณจะใช้เวลาไม่กี่ล้านครั้งและให้ทุกคนบนอินเทอร์เน็ตเข้าถึง CSS ของคุณในครั้งเดียว

— Oli

6

บางทีมันอาจเพิ่มมูลค่าให้กับคำอธิบายที่ว่าข้อความนั้นเป็นคำพูดเยาะเย้ย? :)

— timofey.com

7

เพื่อความสมบูรณ์ฉันต้องการเพิ่มมุมมองอื่น การถ่ายโอนข้อมูล 1MB ต้องใช้ปริมาณพลังงานที่มีอยู่ในถ่านอัดก้อนถ่านธรรมดา เห็นนี้พูดคุย TED ของเจย์วอล์กเกอร์: player.vimeo.com/video/22399003

— Zensursula

11

ฉันเป็นคนเดียวที่นี่ที่ส่งเสียงเชียร์ในระดับนาโนวินาทีพิเศษหรือไม่

— Leathan

155

พวกเขามีความเทียบเท่าในผล , ชี้ไปทางลัดที่แตกต่างกัน :

border: 0;
//short for..
border-width: 0;

และอื่น ๆ..

border: none;
//short for...
border-style: none;

ทั้งสองทำงานแค่เลือกหนึ่งอันแล้วก็ไปด้วย :)

— Nick Craver
แหล่งที่มา

5

โปรดทราบด้วยว่า"หลังจากความยาวเป็นศูนย์ตัวระบุหน่วยเป็นตัวเลือก"ดังนั้นจึงborder: 0;ถูกต้อง

— Ishmael

59

@Dubs อย่างจริงจังคุณชอบเมื่อมีคนเชื่อมโยงไปยัง w3schools?

— ajax333221

29

@ ajax333221 - ระวังด้วยทัศนคติสีดำและสีขาวที่มีต่อ w3schools (หรือเว็บไซต์ใด ๆ ) ในกรณีนี้คำอธิบายนั้นใช้ได้ในขณะที่ฉันเกลียดพวกเขาโดยทั่วไปคำอธิบายของพวกเขาเนื่องจากเกี่ยวข้องกับคำถามนี้ถูกต้องและรวบรัดพอสมควร คุณมีอิสระที่จะเกลียดพวกเขาโดยทั่วไปและฉันก็ทำเช่นนั้น แต่อย่าคิดว่าเนื้อหาที่มีประโยชน์ 0% มีประโยชน์บางอย่างก็คือแม้บางสิ่งในคำตอบของ yahoo ก็มีประโยชน์ในระดับหนึ่ง

— Nick Craver

4

ไม่ถูกต้อง! ตามที่อธิบายไว้ในคำตอบของฉันและแสดงให้เห็นในการสาธิตสด , ไม่ได้เป็นทางลัดสำหรับborder: 0 border-width: 0แทนเวอร์ชั่นสั้นเสมอชุดทั้งสามคุณสมบัติ: border-color, และborder-style border-width

— Denilson Sá Maia

3

@ DenilsonSáผมบอกว่าพวกเขาเป็นเหมือนกันมีผลบังคับใช้เป็นบรรทัดแรกของคำตอบเพราะถ้าชายแดนมี 0 ความกว้างอีก 2 ไม่ได้เรื่องที่นี่ ในทางกลับกัน CSS 2.1 ที่ชี้แจงพฤติกรรมที่นี่คือการโทรครั้งสุดท้าย 7 เดือนหลังจากคำตอบนี้และผลักดันให้เป็นคำแนะนำมากกว่าหนึ่งปีหลังจากนั้น หากคุณต้องการชี้แจงคำตอบเก่า ๆ ที่นี่โปรดทำเช่นนั้น! การแก้ไขสำหรับการปรับปรุงได้รับการสนับสนุนอย่างแข็งขัน

— Nick Craver

42

อย่างที่คนอื่น ๆ บอกว่าทั้งคู่นั้นมีเหตุผลและจะทำการหลอกลวง ฉันไม่เชื่อ 100% ว่าพวกเขาเหมือนกัน หากคุณมีการเรียงซ้อนลักษณะบางอย่างเกิดขึ้นแล้วในทางทฤษฎีพวกเขาสามารถให้ผลลัพธ์ที่แตกต่างกันเนื่องจากพวกเขามีประสิทธิภาพเหนือค่านิยมที่แตกต่างกัน

ตัวอย่างเช่น. หากคุณตั้งค่า "border: none;" และหลังจากนั้นก็มีสไตล์ที่แตกต่างกันสองแบบที่แทนที่ความกว้างและสไตล์ของเส้นขอบจากนั้นหนึ่งรูปแบบจะทำบางสิ่งและอีกรูปแบบหนึ่งจะไม่

ในตัวอย่างต่อไปนี้ทั้ง IE และ firefox การทดสอบสองครั้งแรกออกมาโดยไม่มีเส้นขอบ อย่างไรก็ตามสองสองนั้นแตกต่างกันกับ div แรกในบล็อกที่สองเป็นแบบธรรมดาและ div ที่สองในบล็อกที่สองที่มีเส้นขอบความกว้างปานกลาง

ดังนั้นแม้ว่าทั้งคู่จะใช้ได้คุณอาจต้องจับตาดูสไตล์ของคุณหากพวกเขาลดหลั่นกันมากและอย่างที่ฉันคิด

<html>
<head>
<style>
div {border: 1px solid black; margin: 1em;}
.zerotest div {border: 0;}
.nonetest div {border: none;}

div.setwidth {border-width: 3px;}
div.setstyle {border-style: dashed;}

</style>
</head>
<body>

<div class="zerotest">
<div class="setwidth">
"Border: 0" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: 0" and "border-style: dashed"
</div>
</div>

<div class="nonetest">
<div class="setwidth">
"Border: none" and "border-width: 3px"
</div>
<div class="setstyle">
"Border: none" and "border-style: dashed"
</div>
</div>

</body>
</html>

— คริส
แหล่งที่มา

1

ในการลบพรมแดนของ datepickers ใน Sencha Touch 2 ที่ผมใช้แทนborder: none border: 0

— กริช Khaira

39

(หมายเหตุ: คำตอบนี้ได้รับการปรับปรุงใน 2014-08-01 เพื่อให้รายละเอียดเพิ่มเติมถูกต้องมากขึ้นและเพื่อเพิ่มการสาธิตสด )

การขยายคุณสมบัติ shortand

ตามข้อกำหนด W3C CSS2.1 ( “ ค่าที่ละเว้นถูกตั้งค่าเป็นค่าเริ่มต้น” ) คุณสมบัติต่อไปนี้เทียบเท่า:

border: hidden;    border-style: hidden;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: none;      border-style: none;
                   border-width: medium;
                   border-color: <the same as 'color' property>

border: 0;         border-style: none;
                   border-width: 0;
                   border-color: <the same as 'color' property>

หากกฎเหล่านี้เป็นกฎที่เฉพาะเจาะจงที่สุดที่ใช้กับเส้นขอบขององค์ประกอบเส้นขอบนั้นจะไม่ปรากฏเนื่องจากความกว้างเป็นศูนย์หรือเนื่องจากhidden/ noneสไตล์ ดังนั้นในการตรวจสอบครั้งแรกกฎทั้งสามนี้จะมีลักษณะเทียบเท่ากัน อย่างไรก็ตามพวกเขาทำงานในรูปแบบที่แตกต่างกันเมื่อรวมกับกฎอื่น ๆ

เส้นขอบในบริบทตารางในการยุบแบบจำลองเส้นขอบ

เมื่อตารางถูกเรนเดอร์โดยใช้border-collapse: collapseแล้วแต่ละเส้นขอบที่เรนเดอร์จะใช้ร่วมกันระหว่างองค์ประกอบหลาย ๆ อัน (เส้นขอบด้านในจะถูกใช้ร่วมกันเป็นเซลล์เพื่อนบ้าน, เส้นขอบด้านนอกจะถูกแชร์ระหว่างเซลล์และตารางนั้นเอง ) ข้อมูลจำเพาะกำหนดกฎบางอย่างสำหรับการแก้ปัญหาความขัดแย้งชายแดน :

พรมแดนกับborder-styleการhiddenมีความสำคัญเหนือพรมแดนที่ขัดแย้งอื่น ๆ ทั้งหมด [ ... ]

เส้นขอบที่มีรูปแบบnoneมีลำดับความสำคัญต่ำสุด [ ... ]

หากไม่มีรูปแบบใดhiddenและอย่างน้อยหนึ่งรูปแบบไม่เป็นnoneเช่นนั้นขอบที่แคบจะถูกยกเลิกเพื่อให้เหมาะกับสไตล์ที่กว้างขึ้น [ ... ]

หากสไตล์เส้นขอบแตกต่างกันในสีเท่านั้น […]

ดังนั้นในบริบทของตารางborder: hidden(หรือborder-style: hidden) จะมีลำดับความสำคัญสูงสุดและจะทำให้การซ่อนชายแดนที่ใช้ร่วมกันไม่ว่าจะเกิดอะไรขึ้น

ในอีกด้านหนึ่งของลำดับความสำคัญborder: none(หรือborder-style: none) มีลำดับความสำคัญต่ำสุดตามด้วยเส้นขอบความกว้างเป็นศูนย์ (เพราะเป็นเส้นขอบแคบที่สุด) ซึ่งหมายความว่าค่าคำนวณของborder-style: noneและค่าคำนวณของborder-width: 0เป็นหลักเดียวกัน

การเรียงลำดับกฎและการสืบทอด

ตั้งแต่noneและ0ส่งผลกระทบต่อคุณสมบัติที่แตกต่างกัน ( border-styleและborder-width) พวกเขาจะทำงานแตกต่างกันเมื่อกฎที่เฉพาะเจาะจงมากขึ้นกำหนดเพียงแค่สไตล์หรือเพียงแค่ความกว้าง ดูคำตอบของ Chrisสำหรับตัวอย่าง

การสาธิตสด !

ต้องการดูกรณีเหล่านี้ทั้งหมดในหน้าเดียว? เปิดการสาธิตสด !

— Denilson Sá Maia
แหล่งที่มา

21

การใช้

border: none;

ไม่ทำงานใน IE บางเวอร์ชัน IE9 ใช้ได้ แต่ในรุ่นก่อนหน้านี้จะแสดงเส้นขอบแม้ว่าสไตล์จะเป็น "ไม่มี" ฉันพบสิ่งนี้เมื่อใช้สไตล์ชีทการพิมพ์ที่ฉันไม่ต้องการเส้นขอบบนกล่องป้อนข้อมูล

border: 0;

ดูเหมือนว่าจะทำงานได้ดีในเบราว์เซอร์ทั้งหมด

— คีแรน
แหล่งที่มา

12

คุณสามารถใช้ทั้งสองอย่างได้ตามข้อกำหนดที่ Oli จัดหาให้

border:0 none;ฉันมักจะใช้

แม้ว่าจะไม่มีอันตรายใด ๆ ในการระบุแยกจากกันและเบราว์เซอร์บางตัวจะแยก CSS ได้เร็วขึ้นหากคุณใช้การเรียกคุณสมบัติ CSS1 แบบเดิม

แม้ว่าborder:0;ปกติจะเริ่มต้นสไตล์ชายแดนเพื่อnoneผมได้สังเกตเห็น border:0;แต่เบราว์เซอร์บางบังคับใช้สไตล์ชายแดนเริ่มต้นของพวกเขาที่สามารถเขียนทับแปลก

— Xenni82
แหล่งที่มา

"เบราว์เซอร์บางตัวจะแยกวิเคราะห์ CSS ได้เร็วขึ้น" →ไม่มีความแตกต่างที่เห็นได้ชัดเจนในเวลาการแยกวิเคราะห์ CSS และจริงๆแล้วเวลาในการแยกวิเคราะห์ CSS นั้นไม่เกี่ยวข้องกับ 99.999999999999% ของคดี เวลาในการเรนเดอร์ CSS นั้นสำคัญกว่ามาก (และไม่เกี่ยวข้องกับคำถามนี้โดยสิ้นเชิง)

— Denilson Sá Maia

1

เบราว์เซอร์บางอย่าง? คุณหมายถึงอะไร ดูเหมือนความฝันหรืออะไรบางอย่าง

— Rootical V.

7

ฉันใช้:

border: 0;

จาก8.5.4 ใน CSS 2.1 :

'ชายแดน'

ค่า: [<border-width> || <border-style> || <'เส้นขอบสีด้านบน'>] | สืบทอด

ดังนั้นวิธีใดวิธีหนึ่งของคุณก็ดูดี

— cletus
แหล่งที่มา

1

Zero dotted ดูเหมือนกับ zero solid

— Christopher Altman

1

จริง แต่ดูคำตอบของคริส

— Antony Hatchkins

5

เพื่อดูความแตกต่างระหว่างborder: 0และborder: noneเราสามารถทำการทดลองได้อย่างแม่นยำ

การทดสอบ:

ให้สร้าง divs สามอันอันแรกที่ border สามารถปิดใช้งานได้โดยการตั้งค่าความกว้างเป็นศูนย์ส่วนที่สองที่สามารถปิดการใช้งานได้โดยการตั้งค่าสไตล์เป็น none และที่สามที่มีเส้นขอบที่สามารถ "ปิดใช้งาน" โดยการตั้งค่า สีโปร่งใส จากนั้นให้ลองใช้เอฟเฟกต์ของ:

border: 0;
border: none;
border: transparent

สไตล์เส้นขอบ: ทึบ! สำคัญ; เส้นขอบสี: แดง! สำคัญ; ความกว้างชายแดน: 2px! สำคัญ; เส้นขอบสี: แดง! สำคัญ; ความกว้างชายแดน: 2px! สำคัญ; สไตล์เส้นขอบ: ทึบ! สำคัญ;

แสดงตัวอย่างโค้ด

var container = document.querySelector('#container');
var btnSetZero = document.querySelector('#setZero');
var btnSetNone = document.querySelector('#setNone');
var btnSetTransparent = document.querySelector('#setTransparent');
var btnReset = document.querySelector('#reset');
btnSetZero.addEventListener('click', () => {
	container.className = "border-zero";
});

btnSetNone.addEventListener('click', () => {
	container.className = "border-none";
});

btnSetTransparent.addEventListener('click', () => {
	container.className = "border-transparent";
});

btnReset.addEventListener('click', () => {
	container.className = "";
});

div div {
  border: 2px solid red;
  margin: 2px;
  font-family: monospace;
  white-space: nowrap;
  width: 250px;
}

div.border-zero div {
  border: 0;
}
div.border-none div {
  border: none;
}
div.border-transparent div {
  border: transparent;
}

<div id="container">
  <div style="border-style: solid!important; border-color: red!important;">
    border-style: solid!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-color: red!important;">
    border-width: 2px!important;<br>
    border-color: red!important;
  </div>
  <div style="border-width: 2px!important; border-style: solid!important;">
    border-width: 2px!important;<br>
    border-style: solid!important;
  </div>
</div>

<button id="setZero">border: 0;</button>
<button id="setNone">border: none;</button>
<button id="setTransparent">border: transparent;</button>
<button id="reset">reset</button>

ขยายตัวอย่างข้อมูล

ผลลัพธ์ของฉันเหมือนกันทั้งใน Firefox และโครเมี่ยม:

border: 0;ดูเหมือนว่าการตั้งค่าความกว้าง0ชายแดนและสไตล์ชายแดนnoneแต่ไม่เปลี่ยนสีชายแดน;

border: none;ดูเหมือนว่าจะเปลี่ยนสไตล์เส้นขอบ (เป็นnone) เท่านั้น

border: transparent;ดูเหมือนว่าจะเปลี่ยนสีของtransparentเส้นขอบเป็นและสไตล์ของเส้นขอบเป็นnone;

— Agesly Danzig
แหล่งที่มา

2

ในขณะที่ผลลัพธ์ส่วนใหญ่จะเหมือนกัน (ไม่มีขอบ) แต่ 0 และไม่มีใครพูดถึงสิ่งต่าง ๆ ในทางเทคนิค

0 ที่อยู่ความกว้างชายแดนและไม่มีสไตล์ชายแดนที่อยู่ เห็นได้ชัดว่าเส้นขอบของความกว้าง 0 ไม่มีอยู่ดังนั้นจะไม่มีสไตล์

อย่างไรก็ตามหากในภายหลังในสไตล์ชีทของคุณคุณตั้งใจจะลบล้างสิ่งนี้คุณจะจัดการกับสิ่งใดสิ่งหนึ่งโดยเฉพาะ หากตอนนี้ฉันต้องการเส้นขอบ 3px นั่นจะเป็นการลบล้างเส้นขอบโดยตรง: 0 เกี่ยวกับความกว้าง ถ้าตอนนี้ฉันอยากได้เส้นประแบบจุดนั่นจะเป็นการลบล้างเส้นขอบโดยตรง: ไม่มีเรื่องที่เกี่ยวกับการจัดแต่งทรงผม

— คาร์ลี
แหล่งที่มา

2

วิธีที่ง่ายที่สุดในการลบเส้นขอบด้วย css

border: 0;

— รัก Kumar
แหล่งที่มา

-1

เราควรใช้เส้นขอบ 0

จากความเห็นและประสบการณ์ของฉันฉันขอแนะนำให้ใช้ Border: 0; มีเหตุผลที่ถูกต้องและดีมากเพราะเมื่อใดก็ตามที่เราใช้เส้นขอบ: ไม่มีฉันเข้าใจว่ามันใช้งานได้ แต่คิดว่าเรากำลังใช้เส้นขอบ, 1px, 2px, 3px เป็นต้นฉันหมายถึงเราให้คุณค่ากับเส้นขอบของเราคือ ... px / em / rem ถูกต้องดังนั้นเราจำเป็นต้องใช้เส้นขอบ: 0; สำหรับการลบค่าเส้นขอบเพราะเรารู้ว่าเมื่อเราใช้พื้นหลัง: ไม่มี; หมายความว่าเรากำลังลบพื้นหลังบางพื้นหลังที่ไม่ใช่ค่าที่เป็นอย่างอื่น

ขอบคุณ

— Vinod Kumar
แหล่งที่มา

-3

ในจุดของฉัน

border:none ทำงานได้ แต่ไม่ถูกต้องมาตรฐาน w3c

ดีกว่าเราสามารถใช้ border:0;

— anglimasS
แหล่งที่มา

6

border: noneไม่มีอะไรที่ไม่ถูกต้องเกี่ยวกับการเป็น

— เควนติน