และ

:

< ร่างกาย >

< div ระดับ = 'มุม' >

< ชั่วโมง1 > คำใบ้ลินุกซ์ < / ชั่วโมง1 >

< พี > มุมมนใน CSS < / พี >

< / div >

< / ร่างกาย >

ต่อไปเราจะย้ายไปที่ส่วน CSS

ที่นี่ “ .มุม ” ใช้เพื่อเข้าถึงคลาสที่กำหนดให้กับ

หลังจากนั้นเราจะสร้างเส้นขอบโดยใช้ “ ชายแดน ” และกำหนดค่าความกว้าง ลักษณะ และสีเป็น “ 4px ”, “ แข็ง ', และ ' rgb(248, 6, 107) ” ตามลำดับ นอกจากนี้เราจะเพิ่มความกว้าง” 250px ', ความสูง ' 150px ” และสีพื้นหลัง “ rgb(234, 0, 255) ” สำหรับ div:

.มุม {

ชายแดน : 4px แข็ง rgb ( 248 , 6 , 107 ) ;

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

ความสูง : 150px ;

สีพื้นหลัง : rgb ( 2. 3. 4 , 0 , 255 ) ;

}

เมื่อคุณติดตั้งโค้ดดังกล่าวแล้ว ให้ไปที่ไฟล์ HTML และดำเนินการ คุณจะเห็นผลลัพธ์ดังต่อไปนี้:

ตอนนี้ เราจะย้ายไปยังส่วนถัดไป ซึ่งเราจะสร้างเส้นขอบสี่เหลี่ยมไปยังเส้นขอบมุมมน

วิธีการปัดเศษมุมโดยใช้ CSS?

ในการสร้างเส้นขอบมุมมน “ รัศมีชายแดน กำลังใช้คุณสมบัติ ” ซึ่งคุณสามารถกำหนดรัศมีของมุมได้ตามต้องการ

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ border-radius แสดงไว้ด้านล่าง:

รัศมีชายแดน : ค่า

มาดูตัวอย่างก่อนหน้ากันและตั้งค่า border-radius เพื่อให้ได้มุมมน

ตัวอย่าง

ใน ' .มุม ” คลาสของไฟล์ CSS ตั้งค่าเป็น “ รัศมีชายแดน ” คุณสมบัติเป็น “ 30px ”:

รัศมีชายแดน : 30px ;

ด้วยการเพิ่มบรรทัดด้านบน คุณจะได้ผลลัพธ์ต่อไปนี้:

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

บทสรุป

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