ความแตกต่างระหว่างเค้าร่างและเส้นขอบ

ไม่มีใครทราบถึงความแตกต่างระหว่างคุณสมบัติ 'เส้นขอบ' และ 'ร่าง' ใน CSS? หากไม่มีความแตกต่างทำไมจึงมีคุณสมบัติสองประการสำหรับสิ่งเดียวกัน

จาก: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

คุณสมบัติเค้าร่าง CSS เป็นคุณสมบัติที่ทำให้เกิดความสับสน เมื่อคุณเรียนรู้เกี่ยวกับมันครั้งแรกมันเป็นเรื่องยากที่จะเข้าใจว่ามันแตกต่างจากทรัพย์สินชายแดนอย่างไร W3C อธิบายว่ามันมีความแตกต่างดังต่อไปนี้:

1.Outlines ไม่ใช้พื้นที่

2.Outlines อาจไม่ใช่รูปสี่เหลี่ยมผืนผ้า

นอกจากคำตอบอื่น ๆ ... นี่คือความแตกต่างอีกเล็กน้อยที่ฉันนึกได้:

1) มุมโค้งมน

borderรองรับมุมโค้งมนด้วยborder-radiusคุณสมบัติ outlineไม่

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>

ซอ

(หมายเหตุ: แม้ว่าfirefoxมี-moz-outline-radiusคุณสมบัติที่อนุญาตให้มีมุมโค้งมนบนโครงร่าง ... คุณสมบัตินี้ไม่ได้กำหนดไว้ในมาตรฐาน CSS ใด ๆ และไม่ได้รับการสนับสนุนจากเบราว์เซอร์อื่น ( แหล่งที่มา )

2) จัดแต่งทรงผมด้านเดียวเท่านั้น

ชายแดนมีคุณสมบัติให้เข้ากับสไตล์ของแต่ละด้านที่มีborder-top:, border-left:ฯลฯ

เค้าร่างไม่สามารถทำได้ ไม่มีโครงร่างด้านบน: ฯลฯ มันคือทั้งหมดหรือไม่มีอะไร (ดูโพสต์ SO นี้ )

3) ออฟเซ็ต

ร่างสนับสนุนชดเชยกับสถานที่ให้บริการโครงชดเชย เส้นขอบไม่ได้

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

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

ซอ

หมายเหตุ: เบราว์เซอร์หลักทั้งหมดรองรับoutline-offsetยกเว้น Internet Explorer

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

หากคุณกำลังพยายามหาสาเหตุที่องค์ประกอบไม่ปรากฏตามที่คุณคาดหวังหรือตามขนาดที่คุณคาดไว้ให้เพิ่มโครงร่างเล็กน้อยและดูว่าองค์ประกอบนั้นอยู่ที่ใด

ตามที่กล่าวไว้แล้วโครงร่างไม่ใช้พื้นที่ เมื่อคุณเพิ่มเส้นขอบความกว้าง / ความสูงรวมขององค์ประกอบในเอกสารจะเพิ่มขึ้น แต่สิ่งนั้นจะไม่เกิดขึ้นกับเค้าร่าง นอกจากนี้คุณไม่สามารถกำหนดโครงร่างในด้านเฉพาะเช่นเส้นขอบ มันคือทั้งหมดหรือไม่มีอะไร

TLDR;

W3C อธิบายว่ามันมีความแตกต่างดังต่อไปนี้:

• โครงร่างไม่ใช้พื้นที่
• โครงร่างอาจไม่ใช่รูปสี่เหลี่ยมผืนผ้า

แหล่ง

ควรใช้โครงร่างเพื่อการช่วยในการเข้าถึง

ควรสังเกตว่าจุดประสงค์หลักของโครงร่างคือการเข้าถึงได้ง่าย กำหนดเป็นโครงร่าง: ไม่ควรหลีกเลี่ยง

หากคุณต้องลบมันอาจเป็นความคิดที่ดีกว่าที่จะจัดแต่งทรงผมอื่น

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

ที่มา: "อย่าลบโครงร่างออกจากลิงก์และตัวควบคุมฟอร์ม", 365 Berea Street

ทรัพยากรเพิ่มเติม

• http://outlinenone.com/

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

กล่าวอีกนัยหนึ่งการตั้งค่านี้สร้างเอฟเฟกต์ต่อไปนี้:

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

จากเว็บไซต์โรงเรียน W3

CSS ชายแดนคุณสมบัติช่วยให้คุณสามารถระบุรูปแบบและสีของเส้นขอบองค์ประกอบของ

ร่างเป็นสายที่ถูกวาดรอบองค์ประกอบ (นอกพรมแดน) เพื่อให้องค์ประกอบ "โดดเด่น"

คุณสมบัติชวเลขเค้าร่างตั้งค่าคุณสมบัติเค้าร่างทั้งหมดในการประกาศรายการเดียว

คุณสมบัติที่สามารถตั้งค่าได้คือ (เรียงตามลำดับ): outline-color, outline-style, outline-width

หากหนึ่งในค่าข้างต้นหายไปเช่น "เค้าร่าง: solid # ff0000;" ค่าเริ่มต้นสำหรับคุณสมบัติที่หายไปจะถูกแทรกถ้ามี

ตรวจสอบที่นี่สำหรับข้อมูลเพิ่มเติม: http://webdesign.about.com/od/advancedcss/a/outline_style.htm

คำถามเก่า ๆ เล็กน้อย แต่ควรค่าแก่การพูดถึงข้อบกพร่องของ Firefox ในการเรนเดอร์ Firefox (ยังคงมีอยู่เมื่อวันที่ 13 มกราคม) ซึ่งโครงร่างจะแสดงที่ด้านนอกขององค์ประกอบลูกทั้งหมดแม้ว่าพวกเขาจะล้น ฯลฯ )

คุณสามารถแก้ไขได้ด้วย:

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

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

หลังจากทั้งหมดซึ่งจะง่ายกว่า?

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

หรือ:

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

นอกจากนี้ยังเป็นที่น่าสังเกตว่าโครงร่างของ W3C เป็นขอบของIE เนื่องจาก IE ไม่ได้ใช้รูปแบบกล่อง W3C

ในรูปแบบกล่อง w3c ชายแดนเป็นเอกสิทธิ์ของความกว้างและความสูงขององค์ประกอบ ใน IE มันรวมอยู่ด้วย

ฉันทำโค้ด css / html เล็กน้อยเพื่อดูความแตกต่างระหว่างทั้งสอง

outlineดีกว่าที่จะรวมองค์ประกอบของเด็กที่อาจเกิดขึ้นได้โดยเฉพาะอย่างยิ่งในภาชนะบรรจุแบบอินไลน์

borderถูกดัดแปลงมากขึ้นสำหรับองค์ประกอบที่มีบล็อก

ทำเพื่อคุณ

คุณสมบัติเค้าร่างใน CSS วาดเส้นรอบ ๆ ด้านนอกขององค์ประกอบ มันคล้ายกับชายแดนยกเว้นว่า:

• มันจะไปรอบ ๆ ทุกด้านคุณไม่สามารถระบุเฉพาะ
• ด้านมันไม่ใช่ส่วนของโมเดลกล่องดังนั้นมันจะไม่ส่งผลกระทบต่อ
  ตำแหน่งขององค์ประกอบหรือองค์ประกอบที่อยู่ติดกัน

ที่มา: https://css-tricks.com/almanac/properties/o/outline/

เป็นตัวอย่างที่ใช้งานได้จริงของการใช้ "เค้าร่าง" เส้นขอบจาง ๆ ที่เป็นไปตามระบบมุ่งเน้นไปที่หน้าเว็บ (เช่นหากคุณแท็บผ่านลิงก์) สามารถควบคุมได้โดยใช้คุณสมบัติเค้าร่าง (อย่างน้อยฉันรู้ว่ามันสามารถทำได้ใน Firefox ไม่ใช่ลองเบราว์เซอร์อื่น)

เทคนิค "การแทนที่รูปภาพ" ทั่วไปคือใช้ตัวอย่างเช่น:

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

ด้วยสิ่งต่อไปนี้ใน CSS:

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

ปัญหาที่เกิดขึ้นเมื่อโฟกัสมาถึงแท็กเค้าร่างจะปิด 1000em ไปทางซ้าย โครงร่างสามารถให้คุณปิดโครงร่างโฟกัสขององค์ประกอบดังกล่าว

ฉันเชื่อว่า IE Developer Toolbar ใช้บางสิ่งบางอย่างเช่นโครงร่าง "ภายใต้ประทุน" เมื่อไฮไลต์องค์ประกอบสำหรับการตรวจสอบในโหมด "เลือก" นั่นแสดงให้เห็นถึงความจริงที่ว่า "เค้าร่าง" นั้นไม่มีที่ว่าง

คิดเกี่ยวกับเค้าโครงเป็นเส้นขอบที่โปรเจ็กเตอร์ดึงออกมาด้านนอกเป็นขอบเป็นวัตถุจริงรอบ ๆ สิ่งนั้น
การฉายสามารถทับซ้อนกันได้ง่าย แต่เส้นขอบไม่ยอมให้คุณผ่าน
บางครั้งเมื่อฉันใช้grid+%widthเส้นขอบจะเปลี่ยนสเกลบนพอร์ตดูเช่น div ที่width:100%อยู่ในพาเรนต์ที่มีการwidth:100pxเติมพาเรนต์ทั้งหมด แต่เมื่อฉันเพิ่มborder:solid 5pxdiv มันทำให้ div มีขนาดเล็กลงเพื่อให้มีที่ว่างสำหรับชายแดน หลีกเลี่ยงการทำงานได้!)
แต่ด้วยเค้าร่างมันไม่ได้มีปัญหานี้เนื่องจากเค้าร่างนั้นเสมือนจริงมากกว่า: D มันเป็นเพียงแค่เส้นนอกองค์ประกอบ แต่ปัญหาคือถ้าคุณไม่เว้นระยะห่างอย่างถูกต้องมันจะทับซ้อนกับเนื้อหาอื่น ๆ

เพื่อทำให้สั้น:
โครงร่างข้อดี:
ไม่ยุ่งกับระยะห่างและตำแหน่ง
ข้อเสีย:
โอกาสสูงที่จะทับซ้อนกัน

ความแตกต่างระหว่างเส้นขอบและเส้นขอบ:

เส้นขอบเป็นส่วนหนึ่งของรูปแบบกล่องดังนั้นจึงนับกับขนาดขององค์ประกอบ โครงร่างไม่ได้เป็นส่วนหนึ่งของรูปแบบกล่องดังนั้นจึงไม่มีผลต่อองค์ประกอบที่อยู่ใกล้เคียง

การสาธิต:

#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>

คัดลอกมาจาก W3 โรงเรียน:

ความหมายและการใช้งาน

เค้าร่างเป็นเส้นที่วาดรอบองค์ประกอบ (นอกเส้นขอบ) เพื่อให้องค์ประกอบ "โดดเด่น"