Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

ประเภทของ Gradients (ไล่สี) ใน CSS


Gradients แสดงการผสมผสานของสี 2 สีขึ้นไป

ประเภทของ Gradients มีดังนี้:

Types of gradients

  • Linear Gradients (ไล่สีเชิงเส้น: ลง/ขึ้น/ซ้าย/ขวา/ทแยง)
  • Radial Gradients (ไล่สีแบบรัศมี)

ตัวอย่าง

ตัวอย่าง Radial Gradients:

<html>
  <head>
    <style>
      #grad1 {
        height: 100px;
        width: 550px;
        background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
        background: -o-radial-gradient(red 5%, green 15%, pink 60%);
        background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
        background: radial-gradient(red 5%, green 15%, pink 60%);
      }
    </style>
  </head>
  <body>
    <div id="grad1"></div>
  </body>
</html>