HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี
Colors RGB HEX HSL
พื้นหลัง CSS
Background Color Background Image Background Repeat Background Attachment Background Shorthand
CSS Borders
Borders Border Width Border Color Border Sides Border Shorthand Rounded Borders
CSS Margins
Margins Margin Collapse
CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline
Outline Outline Width Outline Color Outline Shorthand Outline Offset
CSS Text
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
แบบอักษร CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float
Float Clear Float Examples
CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS
Navbar Vertical Navbar Horizontal Navbar
CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
CSS Shadows
เอฟเฟกต์เงา กล่องเงา
เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

CSS Box Shadow

❮ ก่อนหน้า ถัดไป ❯

CSS box-shadow Property

คุณสมบัติ CSS box-shadowใช้เพื่อนำเงาหนึ่งหรือหลายเงาไปใช้กับองค์ประกอบ

ระบุเงาแนวนอนและแนวตั้ง

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

<div> องค์ประกอบที่มีกล่องเงา

ตัวอย่าง

ระบุเงาแนวนอนและแนวตั้ง:

div {
  box-shadow: 10px 10px;
}

ระบุสีสำหรับเงา

colorพารามิเตอร์กำหนดสีของเงา

<div> องค์ประกอบที่มีกล่องเงาสีเทา

ตัวอย่าง

ระบุสีสำหรับเงา:

div {
  box-shadow: 10px 10px grey;
}

เพิ่มเอฟเฟกต์เบลอให้กับเงา

พารามิเตอร์กำหนดรัศมี การblurเบลอ ยิ่งตัวเลขสูง เงาก็จะยิ่งเบลอ

<div> องค์ประกอบที่มี 5px เบลอสีเทากล่องเงา

ตัวอย่าง

เพิ่มเอฟเฟกต์เบลอให้กับเงา:

div {
  box-shadow: 10px 10px 5px grey;
}

กำหนดรัศมีการแพร่กระจายของเงา

spreadพารามิเตอร์กำหนดรัศมีการแพร่กระจาย ค่าบวกจะเพิ่มขนาดของเงา ค่าลบจะลดขนาดของเงา

องค์ประกอบ <div> ที่มีเงากล่องสีเทาเบลอ โดยมีรัศมีการแพร่กระจาย 12px

ตัวอย่าง

กำหนดรัศมีการแพร่กระจายของเงา:

div {
  box-shadow: 10px 10px 5px 12px grey;
}

ตั้งค่าพารามิเตอร์แทรก

พารามิเตอร์ เปลี่ยนinsetเงาจากเงาภายนอก (เริ่มต้น) เป็นเงาภายใน

องค์ประกอบ <div> ที่มีภาพเบลอ สีเทา สิ่งที่ใส่เข้าไปในกล่องเงา

ตัวอย่าง

เพิ่มพารามิเตอร์แทรก:

div {
  box-shadow: 10px 10px 5px grey inset;
}

เพิ่มหลายเงา

องค์ประกอบสามารถมีเงาได้หลายแบบ:

ตัวอย่าง

div {
  box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

การ์ด

คุณยังสามารถใช้box-shadowคุณสมบัตินี้เพื่อสร้างการ์ดที่เหมือนกระดาษได้:

1

1 มกราคม 2564

นอร์เวย์

Hardanger, นอร์เวย์

ตัวอย่าง

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

ทดสอบตัวเองด้วยแบบฝึกหัด

ออกกำลังกาย:

Set a "2px" horizontal, and "2px" vertical, text shadow for the <h1> element.

<style>
h1 {
  : 2px 2px;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

CSS Shadow Properties

The following table lists the CSS shadow properties:

Property Description
box-shadow Adds one or more shadows to an element
text-shadow Adds one or more shadows to a text

❮ Previous Next ❯