CSS3 เป็นจริงที่เริ่มต้นในการรวบรวมโมเมนตัมที่มีหลายคำสั่งที่ระบุไว้ในร่างการทำงานของ CSS3 สนับสนุนโดย Firefox, Safari และ Google Chrome เราคิดว่าเราต้องการใส่กันบางส่วนของรายการโปรดของเรา ก่อนที่เราจะเริ่มต้นคำสั่ง CSS3 เบราว์เซอร์ต้องมีไวยากรณ์เฉพาะสำหรับพวกเขาในการทำงาน

สำหรับ Mozilla Firefox ที่เราจำเป็นต้องใช้ - moz - คำนำหน้าตัวอย่างเช่น :

- moz - border - radius :

และสำหรับ Safari - webkit - คำนำหน้าตัวอย่างเช่น :

- webkit - border - radius :

1 รัศมีชายแดน

คำสั่ง CSS3 ชายแดนรัศมีสร้างมุมโค้งในองค์ประกอบ แทนการใช้ 4 หรือมากกว่าเพื่อสร้างภาพมุมโค้งใช้คำสั่งต่อไปนี้ :

/ * * * * สำหรับ Mozilla Firefox * * * * /
- moz - border - radius : 20px;

/ * * * * สำหรับ Safari และ Google Chrome * * * * /
- webkit - border - radius : 20px;
}

2 เงากล่อง

เงาสามารถนำไปใช้องค์ประกอบการใช้ CSS3 เงาคำสั่งกล่อง เงากล่องรับค่าสามค่าที่เป็นตัวเลขบวกสีจะใช้ผลนี้ ตัวเลขเหล่านี้เป็น :

1 ระยะทางจากแนวนอนชดเชยของเงา -- ค่าบวกหมายถึงเงาที่จะโยนไปทางขวาและเป็นค่าลบไปทางซ้าย
2 ระยะทางจากแนวตั้ง offset ของเงา -- ค่าบวกหมายถึงเงาที่จะโยนด้านล่างและเป็นค่าลบดังกล่าวข้างต้น
3 วิธีการเบลอที่คุณต้องการเงา

ด้วยการเพิ่มของค่าสีที่เงาจะเสร็จสมบูรณ์ :

/ * * * * สำหรับ Mozilla Firefox * * * * /
- moz - กล่อง - shadow : 5px 5px 5px # b6ebf7;

/ * * * * สำหรับ Safari และ Google Chrome * * * * /
- webkit กล่อง - shadow : 5px 5px 5x # b6ebf7;

3 โปร่งใสหรือ RGBA

ความโปร่งใสที่ได้รับเสมอยุ่งยาก เบราว์เซอร์ที่แตกต่างกันในอดีตได้ประยุกต์ใช้ความโปร่งใสโดยใช้คำสั่งที่แตกต่างกัน ที่ต่อเนื่องนี้ไม่สอดคล้องที่ cross - browser นอกจากนี้เรามีของใหม่ให้ CSS3 พื้นหลัง RGBA แต่ในหลักการคำสั่งนี้เป็นตรรกะมากขึ้น คำสั่งที่ประกอบด้วย 4 ค่า -- ครั้งแรกที่สองและสามจะมีสีแดง, สีเขียวและค่าสีฟ้า (0-255) ตามลำดับโดยที่ช่องอัลฟาหรือความโปร่งใส (0-1)

สำหรับคำสั่ง RGBA นำหน้าเบราว์เซอร์ที่เฉพาะเจาะจง (- moz -, - webkit) ไม่จำเป็นต้อง :

# box3 {
สีพื้น : RGBA (110, 142, 185, 0.5);
}

คำสั่งที่จะเพิ่มสีพื้นหลังพื้นหลังเป็นสีฟ้าเทาที่ดีที่ 0.5 หรือความทึบ 50% ในเบราว์เซอร์ที่มีความเข้าใจในคุณสมบัติ CSS3 RGBA

แต่น่าเสียดายที่ Internet Explorer ยังจะพยายามที่จะทำให้คำสั่งสีพื้นหลัง แต่ไม่เข้าใจ RGBA เพื่อให้แน่ใจว่าสีพื้นหลังที่ยังตั้งใน IE สับ IE เท่านั้นเป็นสิ่งจำเป็น ในตัวอย่างต่อไป : Last - เด็กหลอกตัวเลือกที่ Internet Explorer ไม่เข้าใจจะใช้ในการแยกมัน

ร่างกายล่าสุด : เด็ก - # box3 {
/ เบราว์เซอร์ IE ไม่รวม * * * * ใช้ : เด็กครั้งสุดท้าย * * * * /
สีพื้น :! RGBA (110, 142, 185, 0.5) ที่สำคัญ
}

4 คอลัมน์

ความสามารถในการเพิ่มคอลัมน์ที่ได้รับการเพิ่ม CSS3 แทนที่จะลอยองค์ประกอบภายในภาชนะบรรจุที่เราสามารถกำหนดจำนวนคอลัมน์ที่กว้างและกฎ :

/ * * * * สำหรับ Mozilla Firefox * * * * /
- moz - คอลัมน์นับ : 2;
- moz - คอลัมน์ช่องว่าง : 20px;
- moz - คอลัมน์กฎ : ของแข็ง 1px # 6e8eb9;

/ * * * * สำหรับ Safari และ Google Chrome * * * * /
- webkit คอลัมน์นับ : 2;
- webkit คอลัมน์ช่องว่าง : 20px;
- webkit คอลัมน์กฎ : ของแข็ง 1px # 6e8eb9;
}

5 ภาพพื้นหลังหลาย

ภาพพื้นหลังได้รับเสมอเข้มงวดเมื่อมันมาถึง CSS เนื่องจากความจริงที่คุณเท่านั้นที่สามารถใช้ภาพพื้นหลังอย่างใดอย่างหนึ่งต่อองค์ประกอบ นี้ไม่ได้เป็นกรณีที่มี CSS3 ซึ่งจะช่วยให้ภาพหลายภาพต่อองค์ประกอบโดยใช้เพียงเครื่องหมายจุลภาคแยกพวกเขา

เพื่อวางภาพบนทั้งซ้ายและขวาขององค์ประกอบที่คุณสามารถใช้คำสั่งต่อไปนี้มีจัดแต่งทรงผมเล็กน้อย :

padding : 0 20px;
}

คำสั่งนี้จะแสดงผลผิดพลาดโดย Internet Explorer ที่จะไม่ยอมรับ 2 ภาพพื้นหลังในองค์ประกอบเดียว ไม่รวมทั้งหมดสับ IE เป็นสิ่งจำเป็น

# box5 ยกข้อความทั้งย่อหน้า {
/ * สำหรับเบราว์เซอร์ทั้งหมดเพียงอ้างเปิด * /
พื้นหลัง : url (/ i quotel.gif /) 0 0 ไม่มีการทำซ้ำ;
padding : 0 20px;
}

ร่างกายล่าสุด : เด็ก - # box5 ยกข้อความทั้งย่อหน้า {
/ เบราว์เซอร์ IE ไม่รวม * * * * ใช้ : เด็กครั้งสุดท้าย * * * * /
/ * จากนั้นทั้งสองภาพ * * * * /
พื้นหลัง : url (/ i quotel.gif /) ไม่ทำซ้ำ - 0 0, url (/ i quoter.gif /) ไม่ทำซ้ำได้ 100% 0;
}

6 การไล่ระดับสีพื้นหลัง

การไล่ระดับสีพื้นหลัง CSS3 จะมีความยืดหยุ่นมากและสามารถถูกใช้เพื่อสร้างรูปแบบที่ซับซ้อน ที่ดีที่ง่ายที่สุดในการไล่ระดับสี CSS เชิงเส้นช่วยให้การไล่ระดับสีที่จะนำไปใช้กับองค์ประกอบจากบนลงล่างและจากซ้ายไปขวา

ตัวอย่างของการไล่ระดับสี CSS3 ใน Mozilla Firefox นี้ใช้การไล่ระดับสีฟ้าอ่อนที่ด้านล่างของกล่องที่เพียง 20% ของความสูงของกล่อง'

Safari ใช้วิธีการที่ง่ายน้อย แต่มีความยืดหยุ่นมากขึ้นโดยใช้ค่าสีหยุด ตัวอย่างของรหัสเฉพาะ Safari ดังต่อไปนี้ (หมายเหตุเส้นตรงที่จะรวมอยู่ในวงเล็บแทนของนอก) :

# box8 {
พื้นหลัง : - webkit - ไล่ระดับสี (เส้นด้านล่างซ้าย, ด้านบนซ้ายสี - stop (0, # b6ebf7) สี - stop (0.20, # fff));
}

7 การหมุน

CSS3 ยังช่วยให้การหมุนขององค์ประกอบโดยใช้คำสั่งแปลงที่มีการหมุนองศาการรับทรัพย์สินที่เป็นพารามิเตอร์

<code> # box9 {
- moz - แปลง : หมุน (2deg);
- webkit - แปลง : หมุน (2deg);
} </ code>

8 เค้าร่าง

Outilines จะรวมอยู่ในข้อกำหนด CSS3 และอนุญาตให้ทั้งสองเส้นขอบและเค้าร่างที่จะนำไปใช้กับองค์ประกอบหนึ่ง

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

ยื่นใต้ : Css โดย admin