Latest web development tutorials

ผลข้อความ CSS3

ผลข้อความ CSS3

ข้อความ CSS3 มีคุณสมบัติใหม่ ๆ

ในบทนี้คุณจะได้เรียนรู้คุณลักษณะข้อความต่อไปนี้:

  • ข้อความเงา
  • กล่องเงา
  • ข้อความล้น
  • คำห่อ
  • คำแบ่ง

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

属性
text-shadow 4.0 10.0 3.5 4.0 9.5
box-shadow 10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5
text-overflow 4.0 6.0 7.0 3.1 11.0
9.0 -o-
word-wrap 23.0 5.5 3.5 6.1 12.1
word-break 4.0 5.5 15.0 3.1 15.0

CSS3 เงาข้อความ

ใน CSS3 คุณสมบัติข้อความเงานำไปใช้กับข้อความเงา

ผลเงาข้อความ!

คุณสามารถระบุเงาแนวนอนแนวตั้งเงาสีเบลอระยะทางและเงา:

OperaSafariChromeFirefoxInternet Explorer

ตัวอย่าง

เพิ่มเงาให้ชื่อเรื่อง:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

ลอง»

CSS3 คุณสมบัติกล่องเงา

ใน CSS3 คุณสมบัติ CSS3 กล่องเงาเงาใช้กับกล่อง

ตัวอย่าง

div {
กล่องเงา: 10px 10px;
}

ลอง»

ถัดไปเพิ่มสีให้เงา

ตัวอย่าง

div {
กล่องเงา: 10px 10px สีเทา;
}

ลอง»

ถัดไปเพิ่มเงาเพื่อผลเบลอ

ตัวอย่าง

div {
กล่องเงา: 10px 10px 5px สีเทา;
}

ลอง»

นอกจากนี้คุณยังสามารถเพิ่มผลเงาในสอง :: befor และ :: หลังจากหลอกองค์ประกอบ

ตัวอย่าง

# Boxshadow {
ตำแหน่ง: ญาติ;
ขวัวเงา: 1px 2px 4px RGBA (0, 0, 0, 0.5);
PA dding: 10px;
BAC kground: สีขาว;
}
#boxshadow img {
ความกว้าง: 100%;
ชายแดน: 1px ของแข็ง # 8a4419;
ชายแดนสไตล์: ภาพประกอบ;
}
รุ่น B ประเภทสิทธิ oxshadow :: หลังจาก {
เนื้อหา: '';
position: absolute;
ดัชนี z: -1; / * ซ่อนเงาอยู่เบื้องหลังภาพ * /
กล่องเงา: 0 15px 20px RGBA (0, 0, 0, 0.3);
ความกว้าง: 70%;
ซ้าย: 15%; / * เพียงครึ่งหนึ่งของส่วนที่เหลืออีก 30% * /
ความสูง: 100px;
ด้านล่าง: 0;
}

ลอง»

เป็นกรณีพิเศษคือการใช้ผลบัตรเงา

ตัวอย่าง

div.card {
ความกว้าง: 250px;
กล่องเงา: 0 4px 8px 0 RGBA (0, 0, 0, 0.2), 0 6px 20px 0 RGBA (0, 0, 0, 0.19);
text-align: ศูนย์;
}
}

ข้อความการ์ด >> การ์ดรูปภาพ >>

CSS3 ข้อความคุณสมบัติล้น

แอตทริบิวต์ CSS3 ข้อความล้นระบุว่าผู้ใช้ควรแสดงเนื้อหาล้น

ตัวอย่าง

p.test1 {
พื้นที่สีขาว: nowrap;
ความกว้าง: 200px;
ชายแดน: 1px ของแข็ง # 000000;
ล้น: ซ่อน;
ข้อความล้น: คลิป;
}

p.test2 {
พื้นที่สีขาว: nowrap;
ความกว้าง: 200px;
ชายแดน: 1px ของแข็ง # 000000;
ล้น: ซ่อน;
ข้อความล้น: จุดไข่ปลา;
}

ลอง»

CSS3 ขึ้นบรรทัดใหม่

หากคำยาวเกินไปให้พอดีกับพื้นที่ที่ขยายออกไปข้างนอกไปนี้:

CSS3 คุณสมบัติช่วยให้คุณสามารถห่อห่อข้อความบังคับ - แม้ว่าจะหมายถึงการแยกมันอยู่ตรงกลางของคำ:

โค้ด CSS เป็นดังนี้:

OperaSafariChromeFirefoxInternet Explorer

ตัวอย่าง

ช่วยให้การตัดข้อความยาว:

p {word-wrap:break-word;}

ลอง»

CSS3 โปรแกรม Word ทำลาย

CSS3 โปรแกรม Word ทำลายแอตทริบิวต์ระบุกฎบรรทัดหมด:

โค้ด CSS เป็นดังนี้:

ตัวอย่าง

p.test1 {
คำแบ่งเก็บทั้งหมด;
}

p.test2 {
คำแบ่ง: ทำลายทั้งหมด
}

ลอง»

แอตทริบิวต์ข้อความใหม่

คุณสมบัติ ลักษณะ CSS
แขวนเครื่องหมายวรรคตอน บทบัญญัติตัวอักษรวรรคตอนอยู่นอกกรอบ 3
เครื่องหมายวรรคตอน-ตัด ไม่ว่าบทบัญญัติของตัวอักษรวรรคตอนที่การตัดแต่งกิ่ง 3
text-align สุดท้าย การตั้งค่าวิธีการจัดบรรทัดสุดท้ายหรือทันทีก่อนที่จะสายที่จะบังคับให้แบ่งบรรทัด 3
ข้อความที่เน้น องค์ประกอบที่สำคัญของการประยุกต์ใช้กับแท็กข้อความและเบื้องหน้าคีย์แท็ก 3
ข้อความที่แสดงให้เห็นถึง เมื่อมีวิธีการจัดตำแหน่งที่กำหนดไว้เมื่อ text-align ตั้ง "ปรับ" การใช้งาน 3
ข้อความร่าง สเปคของรูปร่างของข้อความ 3
ข้อความล้น บทบัญญัติเมื่อสิ่งที่เกิดขึ้นเมื่อข้อความล้นองค์ประกอบที่มี 3
ข้อความเงา เพิ่มเงาข้อความ 3
ข้อความห่อ บทบัญญัติของกฎการตัดข้อความ 3
คำแบ่ง ข้อความ CJK ของบทบัญญัติของกฎระเบียบที่ไม่ใช่สายการทำลาย 3
คำห่อ จะช่วยให้การแบ่งความยาวและคำแบ่งแยกห่อยังบรรทัดถัดไป 3