แปลว่า ชายแดน. กรอบและขอบเขต ตัวอย่างที่มีเส้นขอบ CSS ที่แตกต่างกัน

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

เส้นขอบอยู่ระหว่างระยะขอบและช่องว่างภายใน ซึ่งหมายความว่าระยะขอบคือ ด้านหลังชายแดน. สามารถกำหนดเส้นขอบได้ทั้งสี่ด้าน (เสมือนว่าบล็อกอยู่ในกรอบ) หรือด้านเดียว สอง หรือสามด้าน CSS ช่วยให้คุณควบคุมความหนา สี และรูปแบบของเส้นขอบได้ มาศึกษารายละเอียดเพิ่มเติมกันดีกว่า

ความกว้างของเส้นขอบ: ความกว้างของเส้นขอบ

คุณสมบัติ border-width กำหนดความกว้างของเส้นขอบ ส่วนใหญ่มักระบุขนาดนี้เป็นพิกเซล คุณสามารถตั้งค่าความกว้างให้เท่ากันหรือต่างกันสำหรับเส้นขอบทั้งสี่ได้ ตัวอย่างเช่น:

/* เส้นขอบทั้ง 4 กว้าง 2px: */ ความกว้างเส้นขอบ: 2px; /* เส้นขอบด้านบนและด้านล่างกว้าง 2px ด้านซ้ายและด้านขวาคือ 4px: */ ความกว้างของเส้นขอบ: 2px 4px; /* เส้นขอบด้านบน - 2px, ซ้ายและขวา - 6px, ด้านล่าง - 3px: */ ความกว้างของเส้นขอบ: 2px 6px 3px; /* เส้นขอบด้านบน - 2px, ขวา - 3px, ด้านล่าง - 4px, ซ้าย - 5px: */ ความกว้างของเส้นขอบ: 2px 3px 4px 5px;

นอกจากนี้ยังมีคีย์เวิร์ดเพื่อระบุความกว้างของเส้นขอบ:

• บาง - ขอบกว้าง 2px;
• ปานกลาง - เส้นขอบกว้าง 4px;
• หนา - ขอบกว้าง 6px

สีของเส้นขอบ: สีของเส้นขอบ

คุณสมบัติ border-color ระบุสีสำหรับเส้นขอบ สามารถระบุสีในรูปแบบ CSS ใดก็ได้: คำหลักเป็นเลขฐานสิบหกหรือ RGB - ขึ้นอยู่กับว่าอะไรสะดวกกว่าสำหรับคุณ โดยการเปรียบเทียบกับคุณสมบัติก่อนหน้า คุณสามารถตั้งค่าสีเดียวสำหรับเส้นขอบทั้งหมดหรือเลือกก็ได้ สีที่ต่างกันสำหรับแต่ละเส้นขอบ

สีของขอบ: #FFFF00;

คุณยังสามารถตั้งค่าได้ สีโปร่งใส, การเขียน:

ขอบสี: โปร่งใส;

สไตล์เส้นขอบ: สไตล์เส้นขอบ

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

• ทึบ - เส้นขอบทึบ
• ประ - เส้นขอบของจุด;
• ประ - เส้นขอบประ;
• สองเท่า - เส้นขอบคู่;
• ร่อง - รอยบากปริมาตร
• สันเขา - เส้นขอบขนาดใหญ่ที่มีขอบหนา (โดยพื้นฐานแล้วเป็นการผกผันของสไตล์ก่อนหน้า)
• เริ่มแรก - ชายแดนอัด;
• สิ่งที่ใส่เข้าไป - เส้นขอบที่เยื้อง (โดยพื้นฐานแล้วเป็นการผกผันของสไตล์ก่อนหน้า)

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

สไตล์เส้นขอบ: ลายจุดคู่;

บันทึก:วี เบราว์เซอร์ที่แตกต่างกัน รูปร่างเส้นขอบอาจแตกต่างกันเล็กน้อย

เส้นขอบคุณสมบัติ CSS ทั่วไป: 3 ใน 1

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

เส้นขอบ: 2px จุด #FF0000;

ขอบเขตสำหรับแต่ละฝ่าย

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

• border-top - สไตล์สำหรับเส้นขอบด้านบน
• border-right - สำหรับเส้นขอบด้านขวา
• border-bottom - สำหรับเส้นขอบล่าง;
• border-left - สำหรับเส้นขอบด้านซ้าย

ผลลัพธ์

ตอนนี้คุณรู้วิธีสร้างเส้นขอบสำหรับบล็อกแล้ว ก็สามารถฝึกสร้างบล็อกได้ มีหลายวิธีในการอธิบายสไตล์โดยกระชับโดยไม่ต้องมีบรรทัดมากเกินไป ไฟล์ซีเอสเอส- ความรู้เกี่ยวกับหลักการของสไตล์ชีตแบบเรียงซ้อนมีบทบาทสำคัญในที่นี้ ลองดูตัวอย่าง

สมมติว่าคุณต้องการสร้างเฟรมสำหรับ บล็อก divมีเส้นขอบสีเทาทึบสามเส้น และเส้นขอบด้านล่างมีจุดสีเขียว คุณสามารถเขียนสไตล์นี้ได้ดังนี้:

div ( border-right: 8px double #FF0000; border-left: 8px double #FF0000; border-bottom: 8px double #FF0000; border-top: 4px dotted #FDD201; )

แต่กระทู้นี้ยาวเกินไป ทั้งหมดนี้สามารถเขียนได้สั้น ๆ :

div ( เส้นขอบ: 8px สองเท่า #FF0000; เส้นขอบด้านบน: 4px จุด #FDD201; )

ตามที่กล่าวไว้ข้างต้น เราจะใช้ประโยชน์จากคุณสมบัติแบบเรียงซ้อนของ CSS ที่นี่ ขั้นแรกเราเขียนสไตล์สำหรับทั้งสี่ด้านของเฟรม จากนั้นระบุสไตล์แยกต่างหากสำหรับเส้นขอบด้านล่าง ดังนั้นจึงเขียนทับสไตล์ก่อนหน้าบางส่วน มันสำคัญมากที่จะต้องปฏิบัติตามลำดับบรรทัดนี้

งานมินิ

ลองสร้างเส้นขอบสำหรับ div ด้วยขนาด 200x200 พิกเซล สไตล์ของเฟรมควรเป็นดังนี้:

• ทำให้ขอบด้านบนและด้านล่างแข็ง แข็งให้เลือกสีเดียวกันและมีความกว้าง 5 พิกเซล
• ทำขอบด้านซ้าย ประกว้าง 3 พิกเซล เลือกสีที่แตกต่างจากสีก่อนหน้า
• ทำให้เส้นขอบด้านขวาเป็นสองเท่า สองเท่ากว้าง 7 พิกเซล สีต่างจากสองอันก่อนหน้า

ท้ายที่สุดแล้ว งานของคุณควรมีลักษณะเช่นนี้ (ยกเว้นสีที่คุณเลือก):

ผลลัพธ์ของงาน (ดูใน Chrome)

ในบทความก่อนหน้านี้เราได้พูดคุยกัน การใช้ CSSคุณสมบัติ border() ขององค์ประกอบของหน้า และฉันสัญญากับคุณว่าฉันจะบอกวิธีใช้รูปภาพเพื่อวาดเส้นขอบ นี่คือสิ่งที่เราจะพูดถึงในวันนี้

หากต้องการใช้รูปภาพเพื่อสร้างเส้นขอบ เราจะใช้คุณสมบัติ CSS border-image

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

ไวยากรณ์ของรหัส

ลองดูตัวอย่างบันทึกทรัพย์สิน:

url (images/bg-image.png) — ที่อยู่ของภาพพื้นหลัง

30 - สามารถมีค่าหนึ่ง, สอง, สามหรือสี่ค่าที่ระบุขนาดส่วนของภาพเป็นพิกเซลซึ่งจะช่วยกำหนดพื้นที่ในการแบ่งรูปภาพ หน่วยไม่ได้เขียนเพียงตัวเลข (10 ไม่ใช่ 10px) ในรูป เส้นสีแดงเน้นบริเวณที่จำเป็นในการสร้างเฟรม

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

รอบ รอบ — สองพารามิเตอร์ (สำหรับเส้นขอบแนวนอนและแนวตั้ง ตามลำดับ) สามารถรับค่าใดค่าหนึ่งในสามค่าได้ ผลลัพธ์สามารถเห็นได้ในภาพ

ยืด— ขยายการวาดเส้นขอบตามขนาดขององค์ประกอบ นี่คือค่าเริ่มต้น
ทำซ้ำ— ทำซ้ำรูปแบบเส้นขอบ
กลม— ทำซ้ำการวาดภาพและปรับขนาดเพื่อให้มีจำนวนรูปภาพเป็นจำนวนเต็มในด้านองค์ประกอบ

ความเข้ากันได้ของเบราว์เซอร์

ขออภัย ไม่ใช่ทุกเวอร์ชันของเบราว์เซอร์ที่รองรับคุณสมบัติ border-image เพื่อความเข้ากันได้ที่ดีขึ้น ขอแนะนำให้ลงทะเบียนคุณสมบัติสำหรับเบราว์เซอร์ทั้งหมด

รหัสตัวอย่าง:

ระบบอัตโนมัติ

มีเครื่องมือบนเว็บที่ช่วยเราเขียนโค้ด มีตัวสร้างที่สะดวกมากสำหรับคุณสมบัติ border-image คุณเพียงแค่อัปโหลดรูปภาพเส้นขอบของคุณที่นั่น (โดยวิธีนี้ คุณสามารถหารูปภาพเหล่านี้ได้มากมายบนอินเทอร์เน็ต) ใช้แถบเลื่อน แบ่งรูปภาพออกเป็นส่วนต่างๆ ตั้งค่าความหนาของขอบและพารามิเตอร์การทำซ้ำ

ยิ่งไปกว่านั้นในทันที โหมดออนไลน์คุณเห็นผล (จะเกิดอะไรขึ้นในที่สุด)

เมื่อคุณบรรลุผลตามที่ต้องการ สิ่งที่คุณต้องทำคือคัดลอกโค้ดที่สร้างขึ้นและวางลงในโค้ดเพจ (ไฟล์ css)

ง่ายและสะดวกมาก

บทสรุป

นี่เป็นการสรุปการสนทนาของเราเกี่ยวกับคุณสมบัติเส้นขอบใน CSS ฉันไม่ได้บอกลาคุณ ในอนาคตอันใกล้นี้ เราจะฝึกอบรมเรื่องเลย์เอาต์ต่อไป สมัครรับข้อมูลอัปเดต...และ...แล้วพบกัน!

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

ข้อมูลโดยย่อ

การกำหนด

ค่านิยม

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

รูปที่ 1. รูปแบบของเฟรม

border-color กำหนดสีของเส้นขอบ ค่าสามารถอยู่ในรูปแบบใดก็ได้ที่ CSS อนุญาต

ตัวอย่าง

ตัวอย่างนี้เพิ่มเส้นขอบคู่รอบบล็อก ผลลัพธ์จะแสดงในรูป 2.

ข้าว. 2. การใช้คุณสมบัติเส้นขอบ

โมเดลวัตถุ

วัตถุ.style.border

บันทึก

เบราว์เซอร์ อินเทอร์เน็ตเอ็กซ์พลอเรอร์จนถึงเวอร์ชันที่ 6 โดยมีความหนาของเส้นขอบ 1px โดยจะแสดงจุดเป็นเส้นประ ด้วยความหนาตั้งแต่ 2px ขึ้นไป ค่าจุดจะทำงานได้อย่างถูกต้อง ข้อผิดพลาดนี้ได้รับการแก้ไขใน IE7 แต่สำหรับเส้นขอบ 1px ทั้งหมดเท่านั้น หากเส้นขอบของบล็อกอันใดอันหนึ่งมีความหนา 2px หรือสูงกว่า ดังนั้นใน IE7 ค่าจุดจะกลายเป็นเส้นประ

รูปแบบเส้นขอบอาจแตกต่างกันเล็กน้อยระหว่างเบราว์เซอร์เมื่อใช้ค่าร่อง ริดจ์ สิ่งที่แทรก หรือค่าเริ่มต้น

ข้อมูลจำเพาะ

ข้อมูลจำเพาะแต่ละอย่างต้องผ่านการอนุมัติหลายขั้นตอน

• คำแนะนำ - ข้อมูลจำเพาะได้รับการอนุมัติจาก W3C และแนะนำให้ใช้เป็นมาตรฐาน
• คำแนะนำผู้สมัคร ( คำแนะนำที่เป็นไปได้ ) - กลุ่มที่รับผิดชอบมาตรฐานมีความพึงพอใจว่าบรรลุเป้าหมาย แต่ต้องการความช่วยเหลือจากชุมชนการพัฒนาเพื่อนำมาตรฐานไปใช้
• ข้อเสนอแนะที่เสนอ ข้อแนะนำ) - ในขั้นตอนนี้ เอกสารจะถูกส่งไปยังสภาที่ปรึกษา W3C เพื่อขออนุมัติขั้นสุดท้าย
• Working Draft - ร่างฉบับสมบูรณ์ยิ่งขึ้นซึ่งได้รับการหารือและแก้ไขเพื่อการตรวจสอบของชุมชน
• ร่างบรรณาธิการ ( ร่างบรรณาธิการ) - เวอร์ชันร่างของมาตรฐานหลังจากมีการเปลี่ยนแปลงโดยบรรณาธิการโครงการ
• ร่าง ( ข้อกำหนดฉบับร่าง) - เวอร์ชันร่างแรกของมาตรฐาน

วลาด เมอร์เซวิช

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

คุณสมบัติเค้าร่าง

คุณสมบัติที่ง่ายที่สุดสำหรับการสร้างเฟรม มีพารามิเตอร์เหมือนกับ border แต่มีความแตกต่างอย่างมากในรายละเอียดบางอย่าง:

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

คำถามเกิดขึ้น - ในกรณีใดที่จำเป็นต้องใช้โครงร่างเมื่อบทบาทของมันแม้จะมีความแตกต่างที่ระบุไว้ แต่ก็ถูกยึดครองโดยชายแดนโดยสิ้นเชิง? มีสถานการณ์ไม่มากนัก แต่เกิดขึ้นได้:

• การสร้างเฟรมหลากสีที่ซับซ้อน
• การเพิ่มเฟรมให้กับองค์ประกอบเมื่อคุณวางเมาส์ไว้เหนือองค์ประกอบนั้น
• ซ่อนเส้นขอบที่เบราว์เซอร์เพิ่มให้กับองค์ประกอบบางอย่างโดยอัตโนมัติเมื่อรับโฟกัส
• สำหรับโครงร่าง คุณสามารถกำหนดระยะห่างจากขอบขององค์ประกอบถึงเฟรมได้โดยใช้คุณสมบัติ Outline-offset เพื่อสร้าง

เฟรมหลากสี

คุณต้องเข้าใจว่าโครงร่างนั้นไม่มีทางแทนที่เส้นขอบได้และสามารถอยู่ร่วมกับเส้นขอบนั้นได้อย่างง่ายดาย ดังที่แสดงในตัวอย่างที่ 1

ตัวอย่างที่ 1: การสร้างเฟรม

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

ข้าว. 1. วางกรอบรอบๆ องค์ประกอบ

เฟรมเมื่อใช้:โฮเวอร์

เมื่อเพิ่มเฟรมผ่านเส้นขอบ ความกว้างขององค์ประกอบจะเพิ่มขึ้น ซึ่งค่อนข้างสังเกตได้ชัดเจนเมื่อรวมเส้นขอบและคลาสหลอก :hover มีสองวิธีในการ "ชนะ" สิ่งนี้ สิ่งที่ง่ายที่สุดคือการแทนที่ border ด้วยเค้าร่าง ซึ่งอย่างที่เราทราบจะไม่ส่งผลกระทบต่อขนาดขององค์ประกอบ (ตัวอย่างที่ 2)

ตัวอย่างที่ 2: เฟรมเมื่อโฮเวอร์

โครงร่างไม่เหมาะสมเสมอไปหากเพียงเพราะการปัดเศษมุมไม่ส่งผลกระทบต่อมัน วิธีที่สองเหมาะสมที่นี่ - เพิ่มเฟรมที่มองไม่เห็นหรือเฟรมที่ตรงกับสีพื้นหลัง จากนั้นเปลี่ยนพารามิเตอร์เมื่อวางเมาส์เหนือ (ตัวอย่างที่ 3) จากนั้นองค์ประกอบจะไม่เกิดการกระจัด เนื่องจากเฟรมมีอยู่แล้วในตอนแรก แต่เราจำไว้เสมอว่าความกว้างขององค์ประกอบคือผลรวมของค่าความกว้าง เส้นขอบด้านซ้ายและเส้นขอบด้านขวา สถานการณ์คล้ายกับความสูง

ตัวอย่างที่ 3: เฟรมเมื่อโฮเวอร์

ล้อมรอบเขตข้อมูลแบบฟอร์ม

ในบางเบราว์เซอร์ (Chrome, Safari, เวอร์ชันล่าสุด Opera) ไอคอนขนาดเล็กจะแสดงรอบๆ ฟิลด์แบบฟอร์มเมื่อได้รับการโฟกัส กรอบสี(รูปที่ 2) หากต้องการลบออก เพียงเพิ่มค่า none ให้กับคุณสมบัติเค้าร่างในสไตล์ ดังแสดงในตัวอย่างที่ 4

ข้าว. 2. ใส่กรอบรอบขอบ

ตัวอย่างที่ 4 การถอดเฟรม

เฟรมผ่านกล่องเงา

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

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

ตัวอย่างที่ 4 แสดงวิธีการเพิ่มสองเฟรมและหนึ่งเส้นขอบทางด้านขวาโดยใช้คุณสมบัติ box-shadow เดียว

ตัวอย่างที่ 4: การใช้กล่องเงา

ผลลัพธ์ ตัวอย่างนี้แสดงในรูป 3.

ข้าว. 3. เฟรมที่สร้างโดยคุณสมบัติ box-shadow