CSS3 คุณสมบัติการสร้างภาพ - ชายแดนสวยเจ๋งจริง ๆ !
การสร้างเส้นขอบไม่มีอะไรใหม่ใน HTML & CSS; เราสามารถเพิ่มเส้นขอบได้ตั้งแต่ต้น คุณอาจคุ้นเคยกับเส้นขอบทึบเส้นประจุดเส้นขอบประและอื่น ๆ.
แต่ด้วยคุณสมบัติภาพเส้นขอบ CSS3 ใหม่การสร้างเส้นขอบบนองค์ประกอบ HTML กำลังสูงขึ้น ทีนี้เราก็สามารถเพิ่มเส้นขอบโดยใช้รูปภาพเป็นแหล่งซึ่งจะทำให้เราสามารถเพิ่มเส้นขอบที่น่าดึงดูดยิ่งขึ้น เอาล่ะทีนี้มาดูกันว่าคุณสมบัตินี้ทำงานอย่างไร.
สนับสนุนไวยากรณ์และเบราว์เซอร์
ภาพชายแดนใน CSS3 ถูกกำหนดโดยใช้ไวยากรณ์ชวเลขต่อไปนี้:
เส้นขอบภาพ: [แหล่งรูปภาพ] [ชิ้น] [ความกว้าง] [เริ่มแรก] [ทำซ้ำ];
ไวยากรณ์ข้างต้นเป็นรุ่นอย่างเป็นทางการจาก W3C ที่รองรับเฉพาะใน Chrome ในขณะที่ Opera, Firefox และ Safari ยังคงต้องการรุ่นที่ขึ้นต้นด้วย (-โอ-, -moz-, -WebKit-) และ Internet Explorer แปลกใจไม่สนับสนุนคุณสมบัตินี้เลย.
นอกจากนี้ [ความกว้าง] และ [เริ่ม] คุณค่าในสิ่งนี้ ขอบภาพ คุณสมบัติยังไม่ได้รับการสนับสนุนในเบราว์เซอร์ใด ๆ อย่างไรก็ตามค่าความกว้างสามารถแทนที่ได้โดยใช้ ชายแดนที่มีความกว้าง คุณสมบัติ.
ดังนั้นในระยะสั้นตอนนี้เราสามารถใช้ค่าของ [แหล่งรูปภาพ], [ชิ้น] และ [ซ้ำ] .
border-image: [แหล่งรูปภาพ] [ชิ้น] [ซ้ำ];
Image Slice
ก่อนที่เราจะสาธิตคุณสมบัติต่อไปเรามาพูดถึง “ภาพชิ้น” ก่อนเป็นสิ่งใหม่ในการประกาศคุณสมบัติ ชิ้นส่วนของภาพที่นี่จะกำหนดการตัดของภาพซึ่งจะใช้จุดเริ่มต้นจากด้านบน, ด้านขวา, ด้านล่างและด้านซ้ายของขอบภาพตามลำดับซึ่งจะแบ่งภาพออกเป็นเก้าส่วนดังนี้.
ในภาพด้านบนคุณจะเห็นว่าส่วนต่างๆ 1, 3, 7 และ 9 จะกลายเป็นมุมของเส้นขอบและส่วนต่างๆ 2, 4, 6 และ 8 จะกลายเป็นขอบหรือเส้นขอบตรวจสอบให้แน่ใจว่าส่วนที่จะกลายเป็นขอบนั้นสามารถทำซ้ำหรือยืดได้.
ค่าของชิ้นสามารถประกาศด้วย พิกเซล หน่วยหรือเปอร์เซ็นต์ (%) หน่วยสำหรับการวัดที่ยืดหยุ่น.
อ้างอิงเพิ่มเติม:
- พื้นหลังและขอบเขต CSS ระดับ 3
การสร้างกรอบรูป
ตอนนี้เรามาสาธิตคุณสมบัติในตัวอย่างจริง.
เวลานี้เรากำลังจะนำไปใช้ ขอบภาพ เพื่อสร้างกรอบรูปและเราจะใช้ภาพด้านล่างเป็นแหล่งที่มา เราได้ทำการวัดภาพอย่างระมัดระวังเพื่อให้สามารถหั่นซ้ำและยืดได้อย่างเหมาะสมโดยไม่คำนึงถึงความกว้างของเนื้อหาและความสูง.
บันทึก: คุณสามารถดาวน์โหลดภาพด้านบนได้จากลิงค์นี้.
นอกจากนี้ในการสาธิตนี้เราจะใช้ Cinemagraph ที่น่าทึ่งนี้จาก From to You เป็นรูปภาพ.
(ที่มาของภาพ: จากฉันถึงคุณ)
มาร์กอัป
มาร์กอัปนั้นง่ายเหมือนนี้:
อย่าลืมที่จะเปลี่ยน images_2 / CSS3 พรมแดนภาพสถานที่ให้บริการทำ-รูปถ่ายจริงๆ cool_3.jpg พร้อมรูปถ่ายของคุณเอง.
ตามสไตล์
จากนั้นลองใช้กรอบกันดู ขอบภาพ.
หากคุณดูที่ภาพด้านบนความกว้างของภาพของเราคือ 180px เบ็ดเสร็จ. ค่านี้สามารถแบ่งออกเป็น 6 ซึ่งแต่ละแผนกถูก 30px; ดังนั้นเราจะแบ่งภาพสำหรับ 30px.
หากคุณใช้ค่าความยาวสำหรับชิ้นคุณควรยกเว้น px หน่วยตามที่มันจะถูกแปลโดยอัตโนมัติไป พิกเซล, แต่ถ้าคุณตัดสินใจที่จะใช้เปอร์เซ็นต์คุณยังจะต้องเพิ่ม (%).
สำหรับการทำซ้ำภาพเราจะใช้ค่าเริ่มต้น ทำซ้ำ. หรือคุณสามารถใช้ ยืด และไม่ต้องกังวลภาพเส้นขอบจะยังดูสง่างาม.
img เส้นขอบภาพ: url ("images / frame.png") 30 ครั้ง; -o-border-image: url ("images / frame.png") 30 ครั้ง; -moz-border-image: url ("images / frame.png") 30 ครั้ง; -webkit-border-image: url ("images / frame.png") 30 ครั้ง; ความกว้างชายแดน: 30px; นอกจากนี้เรายังต้องการวางภาพที่กึ่งกลางของหน้าต่างเบราว์เซอร์รวมทั้งเพิ่มพื้นผิวพื้นหลังให้กับเอกสารเพื่อให้น่าสนใจยิ่งขึ้น.
html background: url ('images / lightpaperfibers.png'); .wrapper margin: 20px auto; ความสูง: 476px; ความกว้าง: 675px; จัดข้อความ: ศูนย์; เอาล่ะฉันคิดว่าเราเสร็จแล้วตอนนี้มาดูกันในเบราว์เซอร์.
- การสาธิต
- แหล่งดาวน์โหลด
คุณรู้สึกเหมือนกำลังดูภาพวาดที่มีมนต์ขลังในฮอกวอตส์หรือไม่?
ความคิดสุดท้าย
นี้ ขอบภาพ ไม่ต้องสงสัยเลยว่าเป็นสิ่งที่ดีในตระกูล CSS3; เราไม่ได้ถูก จำกัด อยู่ที่ชายแดนธรรมดา ๆ อีกต่อไป.
และในโพสต์นี้เราได้แสดงให้คุณเห็นว่าเราสามารถสร้างกรอบรูปภาพโดยไม่ต้องกังวลเกี่ยวกับเนื้อหาหรือในกรณีนี้ขนาดของรูปภาพ (ความกว้างและความสูง) ความสูงและความกว้างสามารถยืดหยุ่นได้ตราบใดที่แหล่งชายแดนสามารถทำซ้ำหรือยืดได้.
สุดท้ายถ้าคุณยังงงอยู่กับ ขอบภาพ, มีเครื่องมือที่คุณสามารถใช้เพื่อช่วยคุณสร้างได้ง่ายขึ้น: เครื่องมือภาพชายแดน
