CSS การแสดงภาพ box-reflect

การกำหนดและการใช้งาน

box-reflect คุณสมบัติใช้เพื่อสร้างผลพลอยตัวขององค์ประกอบ

box-reflect ค่าของคุณสมบัติสามารถเป็น

  • below（ด้านล่าง）
  • above（ด้านบน）
  • left（ด้านซ้าย）
  • right（ด้านขวา）

แนะนำbox-reflect 속�性質ไม่เป็นมาตรฐาน ต้องใช้ -webkit- คำหน้า

ตัวอย่าง

ตัวอย่าง 1

เพิ่มอนุกรมที่ด้านล่างของภาพ

img {
  -webkit-box-reflect: below;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง 2

box-reflect คุณสมบัตินี้สามารถนำไปใช้กับองค์ประกอบ HTML ที่มีความแสดงดูได้ ตัวอย่างดังนี้ ทำให้เกิดอนุกรมที่ด้านล่างของ <p> แทร็ก

p {
  -webkit-box-reflect: below;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง 3

box-reflect คุณสมบัตินี้ยังสามารถใช้กราฟิกสองค่าได้ ตัวอย่างดังนี้ ทำให้เกิดอนุกรมที่ด้านล่างของภาพ ตั้งค่าระยะทาง 70px

img {
  -webkit-box-reflect: below 70px;
}

ลองทดลองด้วยตัวเอง

ตัวอย่าง 4

box-reflect คุณสมบัตินี้ยังสามารถใช้กราฟิกสามค่าได้ ตัวอย่างดังนี้ ทำให้เกิดอนุกรมที่ด้านล่างของภาพ ตั้งค่าระยะทาง 10px และเงาเข้มจากบนไปยังล่าง

img {
  -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));
}

ลองทดลองด้วยตัวเอง

การเขียนระบบซีเอสเอส

box-reflect: none|below|above|left|right|position offset gradient|initial|inherit;

ค่าคุณสมบัติ

ค่า คำอธิบาย
none ค่าเริ่มต้น ไม่แสดงผลสะท้อน
below สร้างอนุกรมที่ด้านล่างขององค์ประกอบ
above สร้างอนุกรมที่ด้านบนขององค์ประกอบ
left สร้างอนุกรมที่ด้านซ้ายขององค์ประกอบ
right สร้างอนุกรมที่ด้านขวาขององค์ประกอบ
position offset

กราฟิกสองค่า:

  • position ตั้งค่าตำแหน่งสำหรับการสะท้อน (below, above, left หรือ right)
  • offset ตั้งค่าระยะทางสำหรับการสะท้อน ระยะทางสามารถใช้หน่วยความยาวเช่น px, pt, cm และอื่น ๆ ค่าเริ่มต้นคือ 0
position offset gradient

กราฟิกสามค่า:

  • position ตั้งค่าตำแหน่งสำหรับการสะท้อน (below, above, left หรือ right)
  • offset ตั้งค่าระยะทางสำหรับการสะท้อน ระยะทางสามารถใช้หน่วยความยาวเช่น px, pt, cm และอื่น ๆ ค่าเริ่มต้นคือ 0
  • gradient ตั้งค่าเอฟเฟกต์โปรแกรมสำหรับการสะท้อน อย่างเช่น อนุกรมที่เลือกตายแบบเงาเข้ม
initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น ดูเพิ่มเติม: initial.
inherit ทำให้คุณสมบัตินี้สืบทอดมาจากองค์ประกอบต้น ดูเพิ่มเติม: inherit.

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: none
การสืบทอด: ไม่
การสร้างอนุกรม: ไม่สนับสนุน โปรดดูเพิ่มเติม:คุณสมบัติที่เกี่ยวข้องกับอนุกรม.
รุ่น: CSS3
การเขียนระบบโปรแกรมภาษา JavaScript: object.style.webkitBoxReflect="below"

การสนับสนุนโปรแกรมนีเวอร์ส

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

ตัวเลขที่มี -webkit- ก่อนหน้านี้นั้นหมายถึงสมุดชั่งที่สนับสนุนใช้ตัวเลขนี้สำหรับเหล่าเซ็กเซ็นต์นี้

Chrome Edge Firefox Safari Opera
4.0 -webkit- 79.0 -webkit- ไม่สนับสนุน 4.0 -webkit- 15.0 -webkit-