CSS中背景设置——渐变色和放射渐变

最新推荐文章于 2024-06-20 11:21:40 发布

趋之

最新推荐文章于 2024-06-20 11:21:40 发布

阅读量975

点赞数 5

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/csgojingyu/article/details/135276169

版权

css 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

渐变：通过渐变可以设置一些复杂的背景颜色，可以从实现一个颜色向其他颜色过渡的效果

渐变是图片，通过 background-image设置

一、渐变色

可选值

1： linear-gradient ['ɡreidiənt]，线性渐变，颜色沿着一条直线发生变化

语法：linear-gradient(方位,颜色1,颜色2)

参数1:表示方位，（可选值，不写默认是to bottom）

(1)to left，to right, to bottom, to top

(2)xxxdeg 表示角度，度数，会更灵活

(3)turn 表示圈 .5turn

参数2:颜色1

参数3:颜色2

注意：可以写多个颜色，默认情况下，颜色是均分占比的，也可以手动的指定渐变的分布情况，例如：background-image:linear-gradient(red 50px,yellow) ，颜色后直接跟占比

2:repeating-linear-gradient() 可以平铺的线性渐变

background-image: repeating-linear-gradient(yellow 0px, red 50px);

参数跟linear-gradient是一样的

参数2-参数1，中间部分是渐变的颜色，拿总高度/差值，就是颜色重复出现的次数

二、放射渐变 —经向渐变（放射性的效果）

radial-gradient() ['reidiəl] ['ɡreidiənt]

语法：background-image: radial-gradient();

默认情况下，圆心是根据元素的形状来计算的

正方形-->圆形

长方形-->椭圆型

参数1:圆心的形状

（1）circle圆形，ellipse椭圆，

（2）设置的大小 at 位置==>像素1 像素2 at 0px 0px

参数2:颜色1

参数3:颜色2

······

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        /* background-image:linear-gradient( red,yellow) ; */
        background-image: repeating-linear-gradient(yellow 0px, red 100px);
        background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>