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

เฟรม html มีไว้ทำอะไร?

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

คุณสมบัติของการสร้างกรอบรอบข้อความ

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

ในขั้นแรก คุณต้องเข้าใจว่าเฟรมสามารถสร้างได้สำหรับทุกคน องค์ประกอบ HTMLไม่ว่าแท็กจะเป็นแบบไหนก็ตาม

,

, , ฯลฯ

ในทางกลับกันมีความแตกต่างระหว่างเฟรมในตัวและ องค์ประกอบบล็อก.

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

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

แน่นอนในการสร้างข้อความในเฟรม html เราจะต้องหันไปใช้สไตล์ในตัว วิธีการนี้จะเหมาะที่สุดสำหรับการเน้นวลีบางย่อหน้าในข้อความและรูปภาพ หากคุณต้องการเน้นส่วนใดส่วนหนึ่งของเทมเพลตที่แสดงบนทุกหน้าของไซต์ ก็สมเหตุสมผลที่จะแก้ไขไฟล์ style.css ของเทมเพลต

วิธีสร้างกรอบรอบข้อความใน html

ฉันคิดว่ามีทฤษฎีมากมาย ถึงเวลาฝึกซ้อมแล้ว ตัวอย่างเช่น ฉันจะใส่กรอบสีเขียวอ่อนที่สว่างด้วย พื้นหลังสีเทาหนึ่งในข้อเสนอที่สำคัญของบทความนี้

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

หากต้องการใช้เฟรมเดียวกัน คุณต้องอ้างอิงถึงแท็ก

คำแนะนำของคุณ.

ตั้งแต่ใน ในตัวอย่างนี้ในตัว สไตล์ CSSฉันคิดว่าการแนะนำคุณให้รู้จักกับแต่ละคนก็สำคัญไม่แพ้กัน

1. ชายแดน– ทรัพย์สินที่รับผิดชอบในการแสดงกรอบ เพื่อให้งานง่ายขึ้น ฉันไม่ได้ระบุแต่ละคุณสมบัติแยกกัน - ความกว้างของเส้นขอบ (ความหนาของเส้นขอบเฟรม), สีของเส้นขอบ (สี กรอบงาน HTML). แต่ฉันย่อโค้ด html ให้สั้นลงเล็กน้อยโดยการเขียนคุณสมบัติทั้งหมดหลังเครื่องหมายทวิภาค

เพื่อการเปลี่ยนแปลง รูปร่าง frame แค่เปลี่ยนค่า แข็ง. มีขอบเขตเฟรมต่อไปนี้:

ริดจ์ – โล่งอก

ประ - ประ

ดับเบิ้ล - ดับเบิ้ล

ประ-ประ

แข็ง - แข็ง

2. การขยายความ– คุณสมบัติที่รับผิดชอบต่อระยะห่างระหว่างกรอบกับวัตถุที่อยู่ภายในกรอบนั้น

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

คุณสมบัติ ระยะขอบ. ด้วยวิธีนี้ คุณสามารถเยื้ององค์ประกอบที่อยู่นอกกรอบได้

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

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

โดยสรุปเราสามารถพูดได้ว่าเพื่อสร้างกรอบรอบรูปภาพหรือข้อความก็เพียงพอที่จะเปิดการแสดงโค้ด html ของบทความและเขียนคุณสมบัติพิเศษไว้ระหว่างแท็กบางแท็ก

ขอบคุณสำหรับความสนใจของคุณและพบกันเร็ว ๆ นี้ในหน้าของ Stimylrosta

พบในข้อความ ข้อผิดพลาดทางไวยากรณ์? กรุณารายงานสิ่งนี้ให้ผู้ดูแลระบบ: เลือกข้อความและกดปุ่มลัด Ctrl+ป้อน

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

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

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

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

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

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

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

เฟรมหลากสี

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เฟรม CSS3เสริมความสามารถในการจัดรูปแบบเส้นขอบองค์ประกอบด้วยคุณสมบัติที่อนุญาต รอบมุมองค์ประกอบ และยังใช้ รูปภาพเพื่อออกแบบเส้นขอบขององค์ประกอบ

มุมโค้งมนและกรอบรูป

1. การปัดเศษมุมด้วยรัศมีขอบ

รองรับเบราว์เซอร์

เช่น: 9.0
ไฟร์ฟอกซ์: 4.0
โครเมียม: 4.0
ซาฟารี: 5.0, 3.1 -เว็บคิท-
โอเปร่า: 10.5
iOS ซาฟารี: 7.1
โอเปร่ามินิ: —
เบราว์เซอร์ Android: 4.1
โครเมียม สำหรับ Android: 44

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

คุณสมบัติ border-radius ช่วยให้คุณสามารถปัดเศษมุมทั้งหมดได้ในคราวเดียว และใช้คุณสมบัติ border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius คุณสมบัติที่คุณ สามารถปัดเศษแต่ละมุมแยกกันได้

หากคุณตั้งค่าสองค่าสำหรับคุณสมบัติ border-radius ค่าแรกจะปัดเศษ บนซ้ายและ มุมขวาล่างและครั้งที่สอง - ด้านบนขวาและ ล่างซ้าย.

ค่าที่ระบุผ่าน/กำหนด แนวนอนและ รัศมีแนวตั้ง. ทรัพย์สินไม่ได้รับมรดก

ตัวเลือก

Div (กว้าง: 100px; ความสูง: 100px; เส้นขอบ: 5px solid;).r1 (รัศมีเส้นขอบ: 0 0 20px 20px;).r2 (รัศมีเส้นขอบ: 0 10px 20px;).r3 (รัศมีเส้นขอบ: 10px 20px ; ;) .r4 (รัศมีเส้นขอบ: 10px/20px;) .r5 (รัศมีเส้นขอบ: 5px 10px 15px 30px/30px 15px 10px 5px;).r6 (รัศมีเส้นขอบ: 10px 20px 30px 40px/30px;) .r7 ( border-radius: 50%;).r8 (border-top: none; border-bottom: none; border-radius: 30px/90px;).r9 (border-bottom-left-radius: 100px;).r10 ( border -radius: 0 100%;).r11 (รัศมีขอบ: 0 50% 50% 50%;).r12 (รัศมีขอบบนซ้าย: 100% 20px; ขอบล่างขวารัศมี: 100% 20px ;)
ข้าว. 1. ตัวอย่าง ตัวเลือกต่างๆมุมบล็อกปัดเศษ

2. เส้นขอบภาพ

รองรับเบราว์เซอร์

เช่น: 11.0
ไฟร์ฟอกซ์: 15.0, 3.5 -เดือน-
โครเมียม: 16.0, 7.0 -เว็บคิท-
ซาฟารี: 6.0, 3.0 -เว็บคิท-
โอเปร่า: 15.0, 11.0 -o-
iOS ซาฟารี: 7.1
โอเปร่ามินิ: 8 -โอ-
เบราว์เซอร์ Android: 4.4, 4.1 -เว็บคิท-
โครมสำหรับแอนดรอยด์: 42

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

ด้วยความช่วยเหลือนี้ ภาพที่เรียบง่ายคุณสามารถรับเฟรมเหล่านี้สำหรับองค์ประกอบได้

/* ตัวอย่างที่ 1 */ div ( ความกว้าง: 260px; ความสูง: 100px; สไตล์เส้นขอบ: ทึบ; ความกว้างของเส้นขอบภาพ: 15px; แหล่งที่มาของเส้นขอบรูปภาพ: url (border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; ) /* ตัวอย่างที่ 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); border-image-slice: 30; border-image-repeat: round; )
ข้าว. 2. ตัวอย่างการออกแบบขอบเขตบล็อกโดยใช้รูปภาพ

การตัด A - B - C - D สร้างมุมของกรอบและส่วนของการออกแบบที่อยู่ระหว่างนั้นจะเติมพื้นที่ที่เหลือของกรอบตาม มูลค่าที่กำหนดคุณสมบัติเส้นขอบภาพซ้ำ ขนาดของส่วนมุม (ในตัวอย่างนี้คือหมายเลข 30) ถูกตั้งค่าโดยใช้ค่าของคุณสมบัติ border-image-slice

2.1. เส้นขอบภาพความกว้าง

คุณสมบัติระบุความกว้างของภาพสำหรับเส้นขอบขององค์ประกอบ หากไม่ได้ระบุความกว้าง จะมีค่าเริ่มต้นเป็น 1

เส้นขอบภาพความกว้าง
ค่า:
ความยาว	ตั้งค่าความกว้างของเส้นขอบเป็นหน่วยความยาว - px / em คุณสามารถตั้งค่าได้ตั้งแต่หนึ่งถึงสี่ค่าในแต่ละครั้ง หากระบุค่าเดียวความกว้างของทุกด้านของเฟรมจะเท่ากัน ค่าสองค่าระบุความกว้างของบนล่างและซ้ายขวาเป็นต้น
ตัวเลข	ค่าตัวเลขที่ใช้คูณค่าความกว้างเส้นขอบ
%	ความกว้างของกรอบขององค์ประกอบจะคำนวณโดยสัมพันธ์กับขนาดของรูปภาพ แนวนอนสัมพันธ์กับความกว้าง แนวตั้งสัมพันธ์กับความสูง
อัตโนมัติ	สอดคล้องกับค่า border-image-slice
อักษรย่อ
สืบทอด

ไวยากรณ์

Div (ความกว้างของเส้นขอบภาพ: 30px;) 3. ตัวอย่างการกำหนดความกว้างของกรอบภาพโดยใช้ หลากหลายชนิดค่านิยม

2.2. แหล่งที่มาของภาพชายแดน

คุณสมบัติระบุเส้นทางไปยังรูปภาพที่จะใช้ในการตกแต่งเส้นขอบของบล็อก

ไวยากรณ์

Div (border-image-source: url(border.png);)

2.3. องค์ประกอบเส้นขอบภาพชิ้น

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

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

ไวยากรณ์

Div (เส้นขอบภาพชิ้น: 50 20;)
ข้าว. 4. ตัวอย่างการระบุชิ้นเฟรมภาพ

2.4. เส้นขอบภาพซ้ำ

คุณสมบัตินี้ควบคุมวิธีที่ภาพพื้นหลังเติมช่องว่างระหว่างมุมของเฟรม สามารถระบุได้โดยใช้ค่าเดียวหรือคู่ของค่า

ไวยากรณ์

Div (border-image-repeat: ซ้ำ;) 5. ตัวอย่างการทำซ้ำส่วนกลางของกรอบภาพโดยใช้ค่าประเภทต่างๆ

2.5. เส้นขอบภาพเริ่มต้น

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

ไวยากรณ์

Div (เส้นขอบภาพออก: 10px;)
ข้าว. 6. ตัวอย่างการเลื่อนกรอบภาพโดยใช้ค่าประเภทต่างๆ

3. โครงร่างออฟเซ็ตออฟเซ็ตด้านนอก-ออฟเซ็ต

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

/*รูปที่ 1:*/ img ( เส้นขอบ: 1px สีชมพูทึบ โครงร่าง: 1px สีเทาประ; โครงร่างออฟเซ็ต: 3px; ) /*รูปที่ 2:*/ img ( ความกว้างของเส้นขอบ: 1px 10px; สไตล์เส้นขอบ: ทึบ; สีเส้นขอบ: ชมพู; โครงร่าง: 1px สีเทาประ; โครงร่างออฟเซ็ต: 3px; ) /*รูปที่ 3:*/ img ( เส้นขอบ: 3px สีชมพูแทรก; โครงร่าง: 1px ประสีเทา; โครงร่างออฟเซ็ต: 1px; )
ข้าว. 7. ตัวอย่างการตกแต่งภาพด้วยกรอบนอก

4. กรอบไล่ระดับสี

ค่าของ border-image ไม่เพียงแต่เป็นรูปภาพเท่านั้น แต่ยังเป็นการเติมแบบไล่ระดับสีอีกด้วย

กรอบโปร่งแสง

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

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; พื้นหลัง: #00E4F6; ) .gradient ( height: 150px; width: 50%; Margin: 0 auto; border: 10px solid transparent ; border-image: linear-gradient(ไปทางขวา, โปร่งใส 0%, #ADF2F7 100%); border-image-slice: 1; )

ซองไปรษณีย์

* (box-sizing:border-box;).wrap ( height: 200px; padding: 25px; ) .gradient ( height: 150px; width: 50%; Margin: 0 auto; border: 10px solid transparent; border-image: 10 การไล่ระดับสีเชิงเส้นซ้ำ (45deg, #A7CECC, #A7CECC 10px, โปร่งใส 10px, โปร่งใส 20px, #F8463F 20px, #F8463F 30px, โปร่งใส 30px, โปร่งใส 40px); )

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

อย่างไรก็ตาม ยังมีวิธีอื่นอีกหลายวิธีในการสร้างเอฟเฟกต์นี้ อีกทั้งการใช้งานที่ชัดเจน ภาพพื้นหลังยังห่างไกลจากอุดมคติมากนัก

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

วิธีที่ 1: เส้นขอบและโครงร่าง

วิธีการนี้ใช้ได้กับเบราว์เซอร์ที่รองรับคุณสมบัติเค้าร่างเท่านั้น (ทั้งหมดยกเว้น IE6/7) คุณเพิ่มคุณสมบัติเส้นขอบและเค้าร่างให้กับองค์ประกอบ

หนึ่ง ( เส้นขอบ: solid 6px #fff; โครงร่าง: solid 6px #888; )

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

วิธีที่ 2: องค์ประกอบหลอก

วิธีนี้ต้องใช้ ตำแหน่งที่แน่นอนกรอบ:

สอง ( เส้นขอบ: ทึบ 6px #fff; ตำแหน่ง: ญาติ; z-index: 1; ) .two:before ( เนื้อหา: ""; แสดง: บล็อก; ตำแหน่ง: สัมบูรณ์; ด้านบน: -12px; ซ้าย: -12px; เส้นขอบ: ทึบ 6px #888; ความกว้าง: 312px; ช่องว่างด้านล่าง: 12px; ความสูงขั้นต่ำ: 100%; ดัชนี z: 10; )

ประเด็นสำคัญคือการตั้งค่าคุณสมบัติดัชนี z (เพื่อให้องค์ประกอบหลอกซ้อนทับเนื้อหา) การวางตำแหน่ง และค่าความสูงขั้นต่ำ คุณสมบัติหลังช่วยรักษาความยืดหยุ่นของเฟรม

วิธีที่ 3: เงา

ที่สุด วิธีที่ดีที่สุดเนื่องจากต้องใช้โค้ดเพียงบรรทัดเดียวในการตั้งค่าคุณสมบัติ box-shadow

สาม ( กล่องเงา: 0 0 0 6px #fff, 0 0 0 12px #888; )

ใช้เงาสองอันเพื่อทำให้เฟรมคู่ปรากฏขึ้น โดยคั่นด้วยเครื่องหมายจุลภาค การเบลอถูกตั้งค่าเป็น 0 เนื่องจากเงาที่สองทับซ้อนกับเงาแรก จึงมีค่าเป็นสองเท่า ความกว้างมากขึ้น. ช่วงเวลาสำคัญ- การใช้สีทึบแสงซึ่งสร้างขอบเขตที่ชัดเจนระหว่างเฟรม

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

โดยปกติแล้ว การรองรับคุณสมบัติ box-shadow นั้นจำกัดเฉพาะเบราว์เซอร์รุ่นใหม่เท่านั้น

วิธีที่ 4: องค์ประกอบ div เพิ่มเติม

ใน วิธีนี้ใช้แล้ว องค์ประกอบภายนอก