CSS3 มุมโค้งมน

ใช้ CSS3 คุณสมบัติ border-radius คุณสามารถทำให้องค์ประกอบใด ๆ "มุม".

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นทรัพย์สิน

-webkit- หรือ -moz- ตัวเลขก่อนหน้านี้แสดงการสนับสนุนสำหรับรุ่นแรกของคำนำหน้า

属性
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

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

ใช้ CSS3 คุณสมบัติ border-radius คุณสามารถทำให้องค์ประกอบใด ๆ "มุม".

ต่อไปนี้สามตัวอย่าง:

1. ระบุสีพื้นหลังขององค์ประกอบที่โค้งมน:

เนื้อ!

2. ระบุเนื้อองค์ประกอบชายแดน:

เนื้อ!

3. ระบุองค์ประกอบภาพพื้นหลังเนื้อ:

เนื้อ!

รหัสเป็นดังนี้:

ตัวอย่าง

# rcorners1 {
border-radius: 25 พิกเซล;
พื้นหลัง: # 8AC007;
padding: 20px;
ความกว้าง: 200px;
ความสูง: 150px;
}

# rcorners2 {
border-radius: 25 พิกเซล;
ชายแดน: 2px ของแข็ง # 8AC007;
padding: 20px;
ความกว้าง: 200px;
ความสูง: 150px;
}

# rcorners3 {
border-radius: 25 พิกเซล;
พื้นหลัง: URL (paper.gif);
พื้นหลังตำแหน่ง: ซ้ายบน;
พื้นหลังซ้ำ: ทำซ้ำ;
padding: 20px;
ความกว้าง: 200px;
ความสูง: 150px;
}

ลอง»

CSS3 border-radius - ระบุเนื้อแต่ละ

ถ้าคุณระบุเพียงค่าหนึ่งในทรัพย์สิน border-radius แล้วมันจะสร้างสี่เนื้อ

แต่ถ้าคุณต้องการระบุสิบเอ็ดที่มุมทั้งสี่คุณสามารถใช้กฎต่อไปนี้:

สี่ค่าด้านบนมุมซ้ายของค่าแรกและความคุ้มค่าที่สองคือมุมขวาบนมุมขวาล่างเป็นครั้งที่สามและสี่คือมุมล่างซ้าย
สามค่าด้านบนมุมซ้ายของค่าแรกและความคุ้มค่าที่สองคือด้านบนขวาและล่างซ้ายมุมล่างขวาของมูลค่าที่สาม
สองค่าแรกคือด้านบนซ้ายและมุมขวาด้านล่างและที่สองคือที่มุมขวาบนและมุมซ้ายล่าง
ค่า: สี่เดียวกันค่าโค้งมน

ต่อไปนี้สามตัวอย่าง:

1. สี่ค่า - border-radius: 15px 50px 30px 5px:

2. สามค่า - border-radius: 15px 50px 30px:

3. ทั้งสองค่า - border-radius: 15px 50px:

ต่อไปนี้เป็นรหัสที่มา:

ตัวอย่าง

# rcorners4 {
border-radius: 15px 50px 30px 5px ;
พื้นหลัง: # 8AC007;
padding: 20px;
ความกว้าง: 200px;
ความสูง: 150px;
}

# rcorners5 {
border-radius: 15px 50px 30px;
พื้นหลัง: # 8AC007;
padding: 20px;
ความกว้าง: 200px;
ความสูง: 150px;
}

# rcorners6 {
border-radius: 15px 50px;
พื้นหลัง: # 8AC007;
padding: 20px;
ความกว้าง: 200px;
ความสูง: 150px;
}

ลอง»

นอกจากนี้คุณยังสามารถสร้างมุมรูปไข่:

ตัวอย่าง

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

ลอง»