#yyds干活盘点# 4 Css3 渐变-CFANZ编程社区

#yyds干活盘点# 4 Css3 渐变

一、Css3渐变

线性渐变——Linear Gradients

语法：background：liner-gradient(direction,color-stop1,color-stop2,…);

径向渐变——RadialGradients

语法：background：radial-gradient(center,shapesize,start-color,…,last-color);

二、代码及页面展示

线性渐变——Linear Gradients（代码）

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>LinearGradients</title>
    <style>
      div{
        height: 200px;
        margin-top: 10px;
      }
      #box1{
        background: linear-gradient(to bottom,red, blue);
      }
      .box2{
        background: linear-gradient(to left,red,blue)
      }
      #box3{
        width: 200px;
        background: linear-gradient(to bottom right,red,blue)
      }
      .box4{
        background: linear-gradient(to right,red,orange,yellow,green,cyan,blue,purple)
      }
    </style>
  </head>
  <body>
    <!-- 从上到下的线性渐变 -->
    <div id="box1"></div>
    <!-- 从右到左的线性渐变--> 
    <div class="box2"></div>
    <!-- 从左上角到右下角 -->
    <div id="box3"></div>
    <!-- 彩虹的渐变 -->
    <div class="box4"></div>
  </body>
  </html>

#yyds干活盘点# 4 Css3 渐变_css3

径向渐变——Radial Gradients（代码）

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>RadialGradients</title>
    <style>
      div{
        height: 200px;
        margin-top: 10px;
      }
      .box1{
        width: 200px;
        background: radial-gradient(red,
          green,blue)
      }
      #box2{
        width: 200px;
        background: radial-gradient(red 5%,green 15%,blue 60%)
      }
      .box3{
        width: 300px;
        background: radial-gradient(circle,red ,green,blue)
      }
      #box4{
        width: 300px;
        background: radial-gradient(red ,green,blue)
      }
  
    </style>
  
  
  </head>
  <body>
    <!-- 径向渐变 默认椭圆 通过cirecle可以设置为圆形 -->
    <div class="box1"></div>
    <div id="box2"></div>
    <div class="box3"></div>
    <div id="box4"></div>
    
  </body>
  </html>

#yyds干活盘点# 4 Css3 渐变_html_02

0 条评论