Articles
แนะนำ CSS
คุณสมบัติ CSS ที่เกี่ยวข้องกับการตกแต่งในโครงร่างกล่อง (Box Model)

คุณสมบัติ CSS ที่เกี่ยวข้องกับการตกแต่งในโครงร่างกล่อง (Box Model)

บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับการตกแต่งในโครงร่างกล่อง

คุณสามารถเรียนรู้วิธีการเขียนคุณสมบัติเช่นขอบเขต (Border) และเงา (Shadow)

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-decoration.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-decoration.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Decoration Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Decoration</h2>
 20        </header>
 21        <article>
 22            <h3>border</h3>
 23            <section>
 24                <header><h4>border: 3px solid #333</h4></header>
 25                <section class="sample-view">
 26                    <div class="border-solid">Solid Border</div>
 27                </section>
 28                <header><h4>border: 3px dashed #666</h4></header>
 29                <section class="sample-view">
 30                    <div class="border-dashed">Dashed Border</div>
 31                </section>
 32                <header><h4>border: 5px double #999</h4></header>
 33                <section class="sample-view">
 34                    <div class="border-double">Double Border</div>
 35                </section>
 36                <header><h4>border: 2px solid #000; border-radius: 15px;</h4></header>
 37                <section class="sample-view">
 38                    <div class="border-rounded">Rounded Border</div>
 39                </section>
 40            </section>
 41        </article>
 42
 43        <article>
 44            <h3>border-radius</h3>
 45            <section>
 46                <header><h4>border-radius: 20px</h4></header>
 47                <section class="sample-view">
 48                    <div class="border-radius-all-rounded">All corners rounded</div>
 49                </section>
 50                <header><h4>border-top-left-radius: 20px</h4></header>
 51                <section class="sample-view">
 52                    <div class="border-radius-top-left-rounded">Top-left rounded</div>
 53                </section>
 54                <header><h4>border-radius: 50px / 25px</h4></header>
 55                <section class="sample-view">
 56                    <div class="border-radius-ellipse-corners">Ellipse corners</div>
 57                </section>
 58            </section>
 59        </article>
 60
 61        <article>
 62            <h3>outline</h3>
 63            <section>
 64                <h4>Outline Examples</h4>
 65                <header><h4>outline: 2px solid red</h4></header>
 66                <section class="sample-view">
 67                    <div class="outline-solid">Solid Red Outline</div>
 68                </section>
 69                <header><h4>outline: 3px dashed blue</h4></header>
 70                <section class="sample-view">
 71                    <div class="outline-dashed">Dashed Blue Outline</div>
 72                </section>
 73                <header><h4>outline: 4px double green</h4></header>
 74                <section class="sample-view">
 75                    <div class="outline-double">Double Green Outline</div>
 76                </section>
 77                <header><h4>outline: 2px solid purple; outline-offset: 10px;</h4></header>
 78                <section class="sample-view">
 79                    <div class="outline-offset">Outline with Offset</div>
 80                </section>
 81            </section>
 82        </article>
 83
 84        <article>
 85            <h3>box-shadow</h3>
 86            <section>
 87                <h4>Box Shadow Examples</h4>
 88                <header><h4>box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5)</h4></header>
 89                <section class="sample-view">
 90                    <div class="box-shadow-basic-shadow">Basic Shadow</div>
 91                </section>
 92                <header><h4>box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3)</h4></header>
 93                <section class="sample-view">
 94                    <div class="box-shadow-inset-shadow">Inset Shadow</div>
 95                </section>
 96                <header><h4>box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);</h4></header>
 97                <section class="sample-view">
 98                    <div class="box-shadow-multiple-shadow">Multiple Shadows</div>
 99                </section>
100            </section>
101        </article>
102    </main>
103</body>
104</html>

การตกแต่ง

คุณสมบัติ border 

 1.border-solid, .border-dashed, .border-double, .border-rounded {
 2    background-color: lightsteelblue;
 3}
 4
 5.border-solid {
 6    border: 3px solid #333;
 7}
 8
 9.border-dashed {
10    border: 3px dashed #666;
11}
12
13.border-double {
14    border: 5px double #999;
15}
16
17.border-rounded {
18    border: 2px solid #000;
19    border-radius: 15px;
20}

คุณสมบัติ border ใช้ใน CSS เพื่อกำหนดกรอบขององค์ประกอบ border ประกอบด้วยสามองค์ประกอบ: ความกว้าง (width), รูปแบบ (style), และสี (color) ที่รวมกันเพื่อกำหนดกรอบขององค์ประกอบ

โครงสร้างพื้นฐานของ border 

 1/* Shorthand syntax */
 2border: [border-width] [border-style] [border-color];
 3
 4/* Example of border property */
 5border: 5px solid white;
 6
 7/* Example of individual properties */
 8border-width: 5px;
 9border-style: solid;
10border-color: black;

  • ใช้ border-width เพื่อระบุความหนาของขอบ หน่วยสามารถระบุได้เป็น px, em, %, เป็นต้น

  • ระบุประเภทของขอบด้วย border-style คุณสามารถระบุมูลค่าดังต่อไปนี้

    • ค่ารูปแบบ (Style Values):
      • none (ไม่มีขอบ)
      • solid (เส้นทึบ)
      • dotted (เส้นจุด)
      • dashed (เส้นประ)
      • double (เส้นคู่)
      • groove (เส้นร่อง)
      • ridge (เส้นสันขึ้น)
      • inset (เส้นเงาด้านใน)
      • outset (เส้นเงาด้านนอก)

ระบุสีของขอบด้วย border-color สีสามารถระบุได้โดยใช้ชื่อสี, rgb(), rgba(), hex, เป็นต้น

ตั้งค่ารายบุคคลสำหรับแต่ละด้าน 

1.box {
2    border-top: 3px solid red;    /* Top border: 3px solid red */
3    border-right: 5px dashed blue; /* Right border: 5px dashed blue */
4    border-bottom: 2px double green; /* Bottom border: 2px double green */
5    border-left: 1px dotted black;  /* Left border: 1px dotted black */
6}

คุณสามารถตั้งค่ารูปแบบที่แตกต่างกันสำหรับแต่ละด้านได้ เช่นนี้

ตั้งค่าขนาด ความหนา สไตล์ และสีแบบรายบุคคล 

 1.box {
 2    /* Specify border width for top, right, bottom, and left */
 3    border-width: 2px 4px 6px 8px;
 4
 5    /* Specify border style for top, right, bottom, and left */
 6    border-style: solid dotted dashed double;
 7
 8    /* Specify border color for top, right, bottom, and left */
 9    border-color: red green blue yellow;
10}

คุณยังสามารถกำหนดแต่ละลักษณะได้แยกกันโดยใช้ border-width, border-style และ border-color

การใช้ร่วมกับ border-radius 

1.box-rounded {
2    border: 2px solid #000;
3    border-radius: 10px; /* Round corners by 10px */
4}

การใช้คุณสมบัติ border-radius คุณสามารถปรับมุมกรอบให้โค้งมนได้

คุณสมบัติ border-radius 

 1.border-radius-all-rounded, .border-radius-top-left-rounded, .border-radius-ellipse-corners {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Round all corners */
 6.border-radius-all-rounded {
 7    border-radius: 20px;
 8}
 9
10/* Round only the top-left corner */
11.border-radius-top-left-rounded {
12    border-top-left-radius: 20px;
13}
14
15/* Elliptical corners */
16.border-radius-ellipse-corners {
17    border-radius: 50px / 25px;
18}

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

คำอธิบาย:

  • border-radius-all-rounded เป็นคลาสที่ปรับให้มุมทั้งหมดโค้งมนด้วยค่า 20 พิกเซล ทำให้กล่องมีมุมมนอย่างนุ่มนวล
  • border-radius-top-left-rounded เป็นคลาสที่ปรับเฉพาะมุมซ้ายบนให้โค้งมนด้วยค่า 20 พิกเซล โดยที่มุมอื่นยังคงเหลี่ยมอยู่
  • border-radius-ellipse-corners เป็นคลาสที่สร้างมุมรูปวงรี ทำให้กล่องมีมุมโค้งเป็นรูปวงรีในแนวนอน

รูปแบบของคุณสมบัติ border-radius 

1border-radius: value;
2border-radius: top-left-and-bottom-right top-right-and-bottom-left;
3border-radius: top-left top-right bottom-right bottom-left;
4border-top-left-radius: value;
5border-top-right-radius: value;
6border-bottom-right-radius: value;
7border-bottom-left-radius: value;
  • ค่าของคุณสมบัติ border-radius โดยปกติจะระบุเป็นพิกเซลหรือเปอร์เซ็นต์ คุณสามารถกำหนดค่าได้ตั้งแต่ 1 ถึง 4 ค่า
    • การกำหนดค่าหนึ่งค่า จะทำให้มุมทั้งหมดโค้งมนเท่ากัน
    • การกำหนดค่าสองค่า ค่าที่ 1 จะถูกใช้กับมุมซ้ายบนและขวาล่าง และค่าที่ 2 จะถูกใช้กับมุมขวาบนและซ้ายล่าง
    • การกำหนดค่าสี่ค่า คุณสามารถตั้งค่ารัศมีที่แตกต่างกันสำหรับแต่ละมุมได้ ค่าจะถูกนำมาใช้ตามเข็มนาฬิกา เริ่มจากมุมซ้ายบน
  • คุณสามารถกำหนดค่าแยกเฉพาะได้ เช่น border-top-left-radius
1border-radius: 50px / 25px;
  • คุณสมบัติ border-radius ยังสามารถกำหนดรัศมีในแนวตั้งและแนวนอนแยกกันได้ เพื่อให้มุมเป็นรูปวงรี ในกรณีนี้ ให้แยกออกด้วย /
    • ตัวอย่างเช่น การระบุค่า 50px / 25px จะทำให้รัศมีแนวนอนมีค่า 50 พิกเซล และรัศมีแนวตั้งมีค่า 25 พิกเซล

สรุป

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

คุณสมบัติ outline 

 1.outline-solid, .outline-dashed, .outline-double, .outline-offset {
 2    background-color: lightsteelblue;
 3}
 4
 5.outline-solid {
 6    outline: 2px solid red;
 7}
 8
 9.outline-dashed {
10    outline: 3px dashed blue;
11}
12
13.outline-double {
14    outline: 4px double green;
15}
16
17.outline-offset {
18    outline: 2px solid purple;
19    outline-offset: 10px;
20}

คุณสมบัติ outline เป็นคุณสมบัติ CSS ที่ใช้กำหนดเส้นที่วาดรอบๆ องค์ประกอบ

outline คล้ายกับ border แต่แตกต่างกันในจุดต่อไปนี้:

  • outline ไม่ส่งผลต่อรูปแบบกล่องขององค์ประกอบ ดังนั้นจึงไม่ส่งผลกระทบต่อเลย์เอาต์ขององค์ประกอบ
  • เนื่องจาก outline ถูกวาดอยู่นอกองค์ประกอบ มันจึงปรากฏอยู่นอก border
  • border ถูกวาดอยู่ภายในองค์ประกอบ ดังนั้นมันสามารถส่งผลต่อขนาดและเลย์เอาต์ขององค์ประกอบได้

ในตัวอย่างนี้ คุณสมบัติ outline ถูกกำหนด ดังนี้:

  • คลาส outline-solid กำหนดขอบหนา 2px สีแดงแบบทึบ
  • คลาส outline-dashed กำหนดขอบเส้นประสีน้ำเงินขนาด 3px
  • คลาส outline-double กำหนดขอบสองเส้นสีเขียวหนา 4px
  • คลาส outline-offset กำหนดระยะห่าง 10px ระหว่างขอบกับองค์ประกอบ

ไวยกรณ์พื้นฐาน 

1element {
2    outline: outline-width outline-style outline-color;
3    outline-offset: 10px;
4}
outline-width
  • outline-width ใช้กำหนดความหนาของขอบ
  • คุณสามารถกำหนดค่าเช่น thin, medium, thick หรือในหน่วยเช่น px, em
outline-style
  • outline-style ใช้กำหนดรูปแบบของขอบ
  • คุณสามารถกำหนดรูปแบบ เช่น solid, dotted, dashed, double, groove, ridge, inset, outset, none เป็นต้น
outline-color
  • outline-color ใช้กำหนดสีของขอบ
  • คุณสามารถกำหนดสีได้โดยใช้ชื่อ, HEX, RGB เป็นต้น
outline-offset
  • outline-offset ใช้กำหนดระยะห่างระหว่างขอบกับองค์ประกอบ
  • คุณสามารถกำหนดค่าได้ในหน่วยต่างๆ เช่น px, em เป็นต้น

คุณสมบัติ box-shadow 

 1.box-shadow-basic-shadow, .box-shadow-inset-shadow, .box-shadow-multiple-shadow {
 2    background-color: lightsteelblue;
 3}
 4
 5/* Basic shadow */
 6.box-shadow-basic-shadow {
 7    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
 8}
 9
10/* Inner shadow */
11.box-shadow-inset-shadow {
12    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
13}
14
15/* Multiple shadows */
16.box-shadow-multiple-shadow {
17    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
18                -5px -5px 10px rgba(255, 0, 0, 0.5);
19}

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

คำอธิบาย:

  • ในคลาส box-shadow-basic-shadow จะมีเงาดำเบลอแสดงอยู่ที่มุมล่างขวาขององค์ประกอบ

  • ในคลาส box-shadow-inset-shadow เงาเบลอจะแสดงอยู่ภายในองค์ประกอบ เมื่อเงาเข้าสู่ด้านใน คุณสามารถสร้างดีไซน์ที่ยุบตัวลงได้

  • ในคลาส box-shadow-multiple-shadow จะมีเงาสองสี คือ ดำและแดง ถูกใช้กับองค์ประกอบ เนื่องจากเงาแสดงในตำแหน่งที่ต่างกัน จึงทำให้เกิดเอฟเฟกต์สามมิติ

รูปแบบคุณสมบัติ box-shadow 

1box-shadow: [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
2box-shadow: inset [1:horizontal offset] [2:vertical offset] [3:blur radius] [4:spread radius] [5:color];
ความหมายของแต่ละค่า

horizontal offset ตัวแรกคือค่าการเลื่อนในแนวนอนที่ระบุตำแหน่งของเงาจากด้านซ้ายขององค์ประกอบ การระบุค่าบวกจะทำให้เงาอยู่ทางขวา และค่าลบจะทำให้เงาอยู่ทางซ้าย

vertical offset ตัวที่สองคือค่าการเลื่อนในแนวตั้งที่ระบุตำแหน่งของเงาจากด้านบนขององค์ประกอบ การระบุค่าบวกจะทำให้เงาอยู่ด้านล่าง และค่าลบจะทำให้เงาอยู่ด้านบน

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

spread radius ตัวที่สี่คือค่ารัศมีการกระจายที่ระบุระดับการกระจายของเงา การระบุค่าบวกจะทำให้เงาใหญ่ขึ้น ในขณะที่ค่าลบจะทำให้เงาหดตัวลง ค่านี้เป็นค่าทางเลือกเช่นเดียวกัน

color ตัวที่ห้าคือค่าสีซึ่งระบุสีของเงา สามารถตั้งค่าสีได้โดยใช้ชื่อสี RGB HEX HSL หรือโมเดลสีอื่นๆ ที่ CSS รองรับ หากไม่ได้ระบุไว้ จะใช้ค่าสีของข้อความเริ่มต้นขององค์ประกอบ (ค่าของคุณสมบัติ color)

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

ตัวอย่างของ box-shadow

ตัวอย่างเงาพื้นฐาน 
1div {
2    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
3}
  • การเลื่อนในแนวนอน คือ 10px, ทำให้เกิดเงา 10 พิกเซลไปทางขวา
  • การเลื่อนในแนวตั้ง คือ 10px, ทำให้เกิดเงา 10 พิกเซลลงด้านล่าง
  • ค่ารัศมีเบลอ คือ 5px, ทำให้เงาเบลอเป็นระยะ 5 พิกเซล
  • สี คือ rgba(0, 0, 0, 0.5), ทำให้เกิดสีดำโปร่งแสง
ตัวอย่างเงาภายใน 
1div {
2    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
3}
  • การใช้ inset จะวาดเงาไว้ภายในองค์ประกอบ
ตัวอย่างของเงาหลายชั้น 
1div {
2    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);
3}
  • คุณสามารถตั้งค่าเงาหลายชั้นโดยแยกด้วยเครื่องหมายจุลภาค ในตัวอย่างนี้ มีการใช้เงาสองชั้น: เงาสีดำและเงาสีแดง

สรุป

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

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับพื้นหลังคุณสมบัติ CSS ที่เกี่ยวข้องกับรายการ