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

บล็อกนี้จะกล่าวถึงวิธีการใช้เอฟเฟกต์เงากับองค์ประกอบ HTML

วิธีวางเอฟเฟกต์เงาบนองค์ประกอบ HTML โดยใช้ CSS

“ กล่องเงา คุณสมบัติ ” เพิ่มเงารอบ ๆ องค์ประกอบที่สามารถคั่นค่าเอฟเฟกต์ที่เพิ่มสองค่าขึ้นไปด้วยเครื่องหมายจุลภาค

ไวยากรณ์ของคุณสมบัติ box-shadow อธิบายไว้ด้านล่าง

ไวยากรณ์

กล่องเงา : ไม่มี |h-offset v-offset เบลอกระจายสี | สิ่งที่ใส่เข้าไป | อักษรย่อ | คุณได้รับมรดก ;

คำอธิบายของไวยากรณ์ที่กล่าวถึงข้างต้นแสดงอยู่ด้านล่าง:

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

มาดูกันว่าเอฟเฟกต์เงามีลักษณะอย่างไรผ่านตัวอย่างที่ใช้งานได้จริง

ตัวอย่าง

ในไฟล์ HTML ขั้นแรกให้เพิ่ม '

'. ภายในองค์ประกอบ

นี้ เพิ่มแท็ก

และ
เพื่อให้เนื้อหาไปยังหน้าเว็บ

HTML

< แผนก >

< h1 > กล่องเงา < / h1 >

< หน้า > กล่องเงา: 3px 8px < / หน้า >

< / แผนก >

ตอนนี้ ใช้คุณสมบัติ CSS กับองค์ประกอบ HTML ที่เพิ่มเข้ามา

ซีเอสเอส

แผนก {

กล่องเงา : 3px 8px ;

}

องค์ประกอบ div ใช้กับคุณสมบัติ “ กล่องเงา ” มีค่า “ 3px 8px ” ซึ่งแสดงถึงออฟเซ็ตแนวนอนและออฟเซ็ตแนวตั้ง

เอาต์พุต

ในส่วนถัดไป องค์ประกอบ HTML จะถูกจัดรูปแบบด้วยคุณสมบัติต่างๆ

ซีเอสเอส

แผนก {

ชายแดน : 5พิกเซล แข็ง rgb ( 255 , 111 , 1 ) ;

กล่องเงา : 3px 8px 9px 4px #f4af1b ;

}

ต่อไปนี้เป็นคุณสมบัติ CSS เพิ่มเติมที่ใช้กับองค์ประกอบ div:

“ ชายแดน ” คุณสมบัติถูกกำหนดเป็นค่า 5px solid rgb(255, 111,1) โดยที่ 5px ระบุความกว้างของเส้นขอบ solid แสดงถึงสไตล์ของเส้นขอบ และ rgb(255, 111, 1) เป็นสี
“ กล่องเงา คุณสมบัติ ” ที่มีค่า 3px 8px 9px 4px #f4af1b แทน h-offset เป็น 3px, v-offset เป็น 8px, เบลอเป็น 9px, กระจายเป็น 4px และ #f4af1b ระบุสี

รหัสที่กำหนดข้างต้นจะแสดงองค์ประกอบ div ดังที่แสดงด้านล่าง:

ในส่วนถัดไป ให้สร้างกล่องสองกล่องแทนองค์ประกอบ div สองรายการ เราจะให้แต่ละอันมีค่าเงาหลายกล่องที่แตกต่างกันและสังเกตผลลัพธ์

HTML

<รหัส div = 'กล่อง1' >

> เงากล่อง >

<หน้า > กล่องเงา : 3px 8px 9px 4px #f4af1b >

> > >

<รหัส div = 'บ็อกซ์ทู' >

> เงากล่อง >

<หน้า > กล่องเงา : 3px 8px 9px 4px #f4af1b >

>

สไตล์บ็อกซ์1 div

#กล่อง1 {

ความกว้าง : 40% ;

ความสูง : 140px ;

ชายแดน : 5พิกเซล แข็ง #ff9c83 ;

กล่องเงา : 8px 10px 15พิกเซล 20px #807f7f ;

}

ที่นี่:

“ #กล่อง1 ” ใช้เพื่อเข้าถึง div ด้วย id box1
“ ความกว้าง คุณสมบัติ ” ใช้สำหรับการตั้งค่าความกว้างขององค์ประกอบ
“ ความสูง คุณสมบัติ ” กำหนดความสูงขององค์ประกอบ
“ ชายแดน ” ได้รับค่า 5px solid #ff9c83 โดยที่ 5px ระบุความกว้างของเส้นขอบ solid แสดงถึงลักษณะของเส้นขอบ และ #ff9c83 เป็นสี
“ กล่องเงา ” คุณสมบัติจะถูกตั้งค่าเป็น “ 8px 10px 15px 20px #807f7f ” โดย 8px คือออฟเซ็ตแนวนอน 10px คือออฟเซ็ตแนวตั้ง 15px คือเอฟเฟกต์เบลอ 20px คือเอฟเฟกต์กระจาย และ #807f7f คือสีของเงา

สไตล์บ็อกซ์2 div

#กล่อง2 {

ความกว้าง : 40% ;

ความสูง : 140px ;

ชายแดน : 5พิกเซล แข็ง rgb ( 255 , 111 , 1 ) ;

กล่องเงา : สิ่งที่ใส่เข้าไป 4px 8px #f4af1b ;

ขอบซ้าย : 350px ;

}

สังเกตได้ว่าเราได้กำหนดรูปแบบ box2 div ด้วยคุณสมบัติเดียวกัน:

เคล็ดลับโบนัส: การเพิ่มหลายเงาในองค์ประกอบ HTML

“ กล่องเงา สามารถใช้คุณสมบัติ ” เพื่อเพิ่มเอฟเฟกต์เงาหลายรายการให้กับองค์ประกอบ HTML สามารถทำได้โดยใช้เครื่องหมายจุลภาคระหว่างทุกเงาตามที่แสดงในตัวอย่างด้านล่าง:

กล่องเงา : 6px 6px rgb ( 91 , 0 , 143 ) , 12px 5พิกเซล rgb ( 201 , 8 , 8 ) , 16px 16px 8px rgb ( 226 , 213 , 29 ) ;

อย่างที่คุณเห็น มีการใช้เงาหลายอันสำเร็จแล้ว:

นั่นคือทั้งหมดที่เกี่ยวกับการใช้ CSS border shadow

บทสรุป

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

เงาเส้นขอบ CSS