การใช้คุณสมบัติ border-radius คุณสามารถสร้าง "มุมโค้งมน" สำหรับองค์ประกอบใดๆ ได้ ด้วยคุณสมบัติ border-radius คุณสามารถใช้กฎต่อไปนี้:
(1) สี่ค่า: ค่าแรกคือมุมซ้ายบน ค่าที่สองคือมุมขวาบน ค่าที่สามคือมุมขวาล่าง และค่าที่สี่คือมุมซ้ายล่าง (2) ค่าสามค่า: ค่าแรก ค่าคือมุมซ้ายบน ค่าที่สองคือมุมขวาบนและมุมซ้ายล่าง ค่าที่สามคือมุมขวาล่าง (3) สองค่า: ค่าแรกคือมุมซ้ายบนและมุมขวาล่าง ค่าที่สองคือมุมขวาบนและมุมซ้ายล่าง (4) ค่าหนึ่ง: ค่าเนื้อสี่ค่าเท่ากัน
หากคุณต้องการให้กราฟิกมีเอฟเฟกต์มุมโค้งมน คุณจะต้องเพิ่มแอตทริบิวต์หนึ่งรายการเท่านั้น นั่นคือแอตทริบิวต์ border-radius หากต้องการให้กลมมาก ให้เพิ่มค่านี้
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>หน้าแรก</title>
<สไตล์>
div{
ความกว้าง: 100px;
ความสูง: 100px;
สีพื้นหลัง: rgb (151, 26, 49);
รัศมีเส้นขอบ: 10px;
-
img{
ความกว้าง: 100px;
ความสูง: 100px;
รัศมีเส้นขอบ: 10px;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div>
<img src="../vue/1.jpg">
</div>
</ร่างกาย>
</html>ถ้าอยากให้กลมก็เขียน 100%
เอฟเฟกต์เงากล่องเงา
ระยะขอบ: 0 อัตโนมัติ: ไม่จำเป็นต้องควบคุมด้านบนและด้านล่าง อัตโนมัติทำให้ช่องว่างด้านซ้ายและขวามีการกระจายเท่าๆ กัน แล้ววางกล่องไว้ตรงกลาง ปล่อยให้ช่องว่างระหว่างช่องว่างซ้ายและขวามีการกระจายเท่าๆ กันคือสิ่งที่รถยนต์ทำ
0 หมายถึง ไม่มีเงาในแนวนอน 0 ตัวที่สองหมายถึงไม่มีเงาในแนวตั้ง และตัวที่สามคือเงาเบลอ
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>หน้าแรก</title>
<link href="" type="text/css" rel="stylesheet"/>
<style type="text/css">
div{
ความกว้าง: 500px;
ความสูง: 500px;
สีพื้นหลัง: สีเขียวเหลือง;
ระยะขอบ: 0 อัตโนมัติ;
กล่องเงา: 0 0 50px rgba (0, 0, 0, 0.5);
-
</สไตล์>
</หัว>
<ร่างกาย>
<คลาส div="d1">
</div>
</ร่างกาย>
</html>นี่เป็นการสรุปบทความนี้เกี่ยวกับฟีเจอร์เงาของกล่อง CSS3 และรัศมีเส้นขอบโค้งมน สำหรับข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ใหม่ของ CSS3 box-shadow โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรือเรียกดูบทความที่เกี่ยวข้องต่อด้านล่าง คุณจะสนับสนุน downcodes.com มากขึ้นในอนาคต!