(This page uses CSS style sheets)
เนื้อหาในบทความนี้ได้รับแรงบันดาลใจจาก Arve Bersvendsen ซึ่งได้เขียน การใช้ CSS ที่น่าสนใจอีกมากมาย สำหรับ CSS3 การสร้างขอบมนและเงานั้นเป็นเรื่องง่ายมาก เช่น หากต้องการให้ย่อหน้าใด มีขอบมนหนาสีแดง สามารถทำได้โดย ใช้คำสั่งเพียงสองบรรทัดใน CSS3 ดังนี้:
P { border: solid thick red; border-radius: 1em }และหากต้องการทอดเงาขนาดครึ่ง em ด้านล่างและขวาของย่อหน้า ทำได้โดยเพิ่มคำสั่งอีกหนึ่งบรรทัด ดังนี้:
P { box-shadow: black 0.5em 0.5em 0.3em }
ทริคหลักในการทำขอบมนและเงาทำโดยใส่รูปสี่รูปแก่ pseudo-element ('::before' and '::after') อีเลเมนต์ '::before' และ '::after' นั้น สามารถใส่ฉากหน้าและฉากหลังได้ เมื่อรวมกับรูปฉากหลังในอีเลเมนต์หลักอีกหนึ่ง เท่ากับห้ารูป
เราจะสร้างรูปขึ้นมาห้ารูป และใส่รูปสี่รูปไว้ยังขอบทั้งสี่ด้าน โดยรูปฉากหลังของข้อความจะใส่ไว้ยังอีเลเมนต์หลัก ดังต่อไปนี้:
CSS ที่ใช้ในการจัดตำแหน่งรูป:
blockquote { max-width: 620px; background: url(rs-right.png) right repeat-y } blockquote::before { display: block; line-height: 0; background: url(rs-topright.png) top right no-repeat; content: url(rs-topleft.png) } blockquote::after { display: block; line-height: 0; background: url(rs-bottomright.png) bottom right no-repeat; content: url(rs-bottomleft.png) }
เนื่องจากรูปมีขนาด 620px เราจึงทำกล่องข้อความที่มีขนาดกว้างได้แค่ 620px เพื่อไม่ให้เกิดรอยต่อ โดยใ้ช้พร็อพเพอร์ตี้ 'max-width' กำหนดขนาดความกว้างมากที่สุดไว้ ส่วนพร็อพเพอร์ตี้ 'display: block' ใช้เพื่อไม่ให้รูปฉากหลังและ content ซ้อนทับกัน 'line-height: 0' ใช้เพื่อกำหนดว่าไม่ให้มีที่ว่างก่อนและหลังกล่องข้อความ
จากคำสั่งข้างต้นเราจะได้ผลดังต่อไปนี้:
ท่านเห็นกล่องสีเขียวจางและเงาล้อมรอบข้อความนหรือไม่ ถ้าไม่เห็นแสดงว่าเบราเซอร์ท่านไม่สามารถรองรับพร็อพเพอร์ตี้ content ได้อย่างสมบูรณ์ (หรืออาจไม่รองรับเลย)
ซอร์ส HTML ข้างต้นเป็นดังนี้:
<blockquote> <p>ท่านเห็นกล่องสีเขียวจางและเงาล้อมรอบข้อความนหรือไม่ ถ้าไม่เห็นแสดงว่าเบราเซอร์ท่านไม่สามารถรองรับพร็อพเพอร์ตี้ content ได้อย่างสมบูรณ์ (หรืออาจไม่รองรับเลย) </blockquote>
หากท่านต้องการทดลองดูว่าเบราเซอร์ท่านรองรับการสร้างขอบมนและเงาด้วย CSS3 แล้วหรือยังสามารถ ทดลองได้ที่นี่