A-AA+then

เราสามารถสร้างพื้นหลังแบบ gradient ได้โดยไม่ต้องใช้รูปภาพ โดยใช้คำสั่ง ของ CSS3 แต่เนื่องจากบราวเซอร์แต่ละยี่ห้อ มีคำสั่งที่ไม่เหมือนกัน มาลองเรียนรู้การแสดง gradient ด้วย CSS กันดู
background-color:#ccc; /* Not support */
background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* Webkit, IE 9 */
background:-moz-linear-gradient(top, #ccc, #000); /* Firefox */
background:-o-linear-gradient(top, #ccc, #000); /* Opera */
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#000000); /* IE 5.5 - 7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#000000)"; /* IE 8 */
 
background-color:#ccc; /* Not support */
background: -webkit-gradient(linear, left top, right top, from(#ccc), to(#000)); /* Webkit, IE 9 */
background: -moz-linear-gradient(left, #ccc, #000); /* Firefox */
background:-o-linear-gradient(top, #ccc, #000); /* Opera */
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#000000, GradientType=1); /* IE 5.5 - 7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#cccccc, endColorstr=#000000, GradientType=1)"; /* IE 8 */
 

CSS

Relate

^