CSS——颜色变化

最新推荐文章于 2025-03-01 03:18:38 发布

Zjaun

最新推荐文章于 2025-03-01 03:18:38 发布

阅读量967

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.youkuaiyun.com/Zjaun/article/details/87165150

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

根据设置的颜色位置就行显示

颜色渐变1

<style type="text/css">
  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:linear-gradient(red,blue);
    
    background:-moz-linear-gradient(left,#ace,#f96);
    background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));
    background:-webkit-linear-gradient(left,#ace,#f96);
    background:-o-linear-gradient(left,#ace,#f96);
  }
  </style>

在这里插入图片描述
2. 颜色渐变2

 div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-linear-gradient(top left,red,rgba(255,0,0,0));
  }

在这里插入图片描述
3. 颜色渗透

div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
  }

在这里插入图片描述

光圈1

  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:radial-gradient(red,yellow,blue);
  }

在这里插入图片描述

光圈2

div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:radial-gradient(red 20%,yellow 30%,blue 40%);
  }

在这里插入图片描述
6. 根据方向改变颜色1

div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-radial-gradient(bottom left,red,yellow,blue 80%);
  }

在这里插入图片描述

根据方向改变颜色2

  div{
    width:400px;
    height:200px;
    border:5px solid #FCF;
    padding:4px;
    background:-webkit-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  }

在这里插入图片描述