บล็อกนี้จะหารือเกี่ยวกับ:

• Outline Radius คืออะไร?
• จะใช้เอฟเฟกต์รัศมีเค้าร่างกับองค์ประกอบ HTML ได้อย่างไร

รัศมีเค้าร่างคืออะไร?

“ โครงร่าง คุณสมบัติ ” ใช้เพื่อกำหนดรูปร่างโครงร่างขององค์ประกอบ แต่ไม่สามารถนำไปใช้ได้โดยตรง ดังนั้น วิธีอื่นในการใช้เอฟเฟกต์รัศมีบนโครงร่างคือการใช้ “ เส้นขอบรัศมี คุณสมบัติ CSS มันระบุมุมมนสำหรับเค้าร่าง

จะใช้เอฟเฟกต์รัศมีเค้าร่างกับองค์ประกอบ HTML ได้อย่างไร

หากต้องการใช้คุณสมบัติรัศมีโครงร่าง ให้ทำตามคำแนะนำที่กำหนด

ขั้นตอนที่ 1: ฝังหัวเรื่อง

เริ่มแรก ให้ฝังหัวเรื่องโดยใช้แท็กหัวเรื่องใดก็ได้จาก “

' ถึง '

'. ตัวอย่างเช่น เราได้ใช้ “

' และ '

” แท็กสำหรับฝังสองหัวเรื่องที่แตกต่างกันในเอกสาร HTML

ขั้นตอนที่ 2: เพิ่มคอนเทนเนอร์ div แรก

หลังจากนั้น เพิ่มคอนเทนเนอร์โดยใช้ปุ่ม “

” แท็ก นอกจากนี้ ให้ใส่เครื่องหมาย “ ระดับ แอตทริบิวต์ ” และระบุชื่อสำหรับคลาสตามที่คุณเลือก

---

---

ขั้นตอนที่ 3: สร้างคอนเทนเนอร์ div ที่สอง

สร้างอีก “ แผนก ” คอนเทนเนอร์โดยทำตามขั้นตอนเดียวกัน:

< h1 สไตล์ = 'สี:rgb(48, 10, 218)' > Linuxhint LTD สหราชอาณาจักร < / h1 >

< ชั่วโมง2 >

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

< / ชั่วโมง2 >

< แผนก ระดับ = 'box1-div' >

Linuxhint นำเสนอเนื้อหาที่ดีที่สุดและไม่ซ้ำใครสำหรับผู้ใช้

< / แผนก >

< แผนก ระดับ = 'box2-div' >

มันใช้งานได้กับหลายประเภท

< / แผนก >

ผลลัพธ์ของโค้ดด้านบนแสดงอยู่ด้านล่าง:

ขั้นตอนที่ 4: กำหนดโครงร่างของคอนเทนเนอร์แรก

เข้าถึงคอนเทนเนอร์แรกโดยใช้ ' .box1-div ” ชั้นเรียนที่ “ . ” เป็นตัวเลือกในการเข้าถึงชั้นเรียน:

.box1-div {

โครงร่าง : แข็ง ;

ความกว้าง : 300px ;

การขยายความ : 15พิกเซล ;

ขอบ : 25พิกเซล ;

}

จากนั้นใช้คุณสมบัติ CSS ด้านล่าง:

• “ โครงร่าง คุณสมบัติ ” ใช้เพื่อเพิ่มโครงร่างรอบองค์ประกอบ ตัวอย่างเช่น ค่าของมันถูกตั้งค่าเป็น “ แข็ง '.
• “ ความกว้าง ” ระบุขนาดขององค์ประกอบในแนวนอน
• “ การขยายความ ” ใช้สำหรับจัดสรรพื้นที่รอบเนื้อหาขององค์ประกอบ
• “ ขอบ ” ระบุช่องว่างที่ด้านนอกของเส้นขอบองค์ประกอบ

ขั้นตอนที่ 5: กำหนดโครงร่างของคอนเทนเนอร์ที่สอง

ตอนนี้ เข้าถึงองค์ประกอบที่สองด้วยความช่วยเหลือของคลาสที่เกี่ยวข้อง ' .box2-div ”:

.box2-div {

โครงร่าง : แข็ง ;

เส้นขอบรัศมี : 20px ;

ความกว้าง : 300px ;

การขยายความ : 15พิกเซล ;

ขอบ : 25พิกเซล ;

}

ใช้คุณสมบัติ CSS “ เส้นขอบรัศมี ” สำหรับกำหนดรัศมีขององค์ประกอบ คุณสมบัตินี้ช่วยให้คุณเพิ่มมุมมนรอบๆ องค์ประกอบได้:

สังเกตได้ว่าเราเพิ่มเอฟเฟกต์รัศมีโครงร่างในองค์ประกอบ HTML สำเร็จแล้ว

บทสรุป

“ เค้าร่างรัศมี ' ไม่สามารถใช้ได้อีก. ผู้ใช้สามารถใช้คุณสมบัติรัศมีเค้าร่างด้วยความช่วยเหลือของคุณสมบัติ CSS “outline” และ “border-radius” “ โครงร่าง ” เพิ่มโครงร่างรอบๆ องค์ประกอบ และปุ่ม “ เส้นขอบรัศมี ” ใช้สำหรับจัดแต่งโครงร่างโดยเฉพาะ โพสต์นี้ได้แสดงคำแนะนำสำหรับการเพิ่มเอฟเฟกต์รัศมีโครงร่างรอบๆ องค์ประกอบใน HTML