【CSS】线性渐变 径向渐变

文章目录

线性渐变

线性渐变

语法background-image：linear-gradient（方向，颜色1，颜色2…）

水平竖直方向 默认从上到下 to left 去到左边 从右往左 to right去到右边 从左往右to top去到上边 从下往上to bottom默认 对角线方向 to left topto right top to left topto left bottom 角度写法

渐变突变

background-iamge：linear-gradient（）；

两段颜色写在同一个位置

<style>div {width: 400px;height: 500px;border: 1px solid #000;margin: 50px;/* 方向默认为从上到下 */background-image: linear-gradient(red, blue);/* 颜色可以写多个 */background-image: linear-gradient(red, blue, green);/* 方向的写法 *//* 01.上下左右 *//* 去到左边 从右到左 */background-image: linear-gradient(to left, red, blue);background-image: linear-gradient(to right, red, blue);background-image: linear-gradient(to top, red, blue);/* 默认 */background-image: linear-gradient(to bottom, red, blue);/* 02.对角线 *//* 去到右上角 从左下角到右上角 */background-image: linear-gradient(to right top, red, blue);/* 顺序可以互换 */background-image: linear-gradient(to top right, red, blue);/* 03.角度 *//* 正值增加是顺时针 负值增加是逆时针 *//* 180deg是默认值 从上到下 *//* 0deg是从下到上 */background-image: linear-gradient(0deg, red, blue);/* 渐变突变 *//* 70%到75%之间只有5%的渐变区域 */background-image: linear-gradient(red 70%, blue 75%);/* 70%到70%之间只在一根线上渐变，只要渐变区域够小，可以忽略不计，得到纯色色块，也叫突变*/background-image: linear-gradient(red 70%, blue 70%);/* 红黄蓝 */background-image: linear-gradient(red 33.3%, yellow 33.3%, yellow 66.6%, blue 66.6%);}</style>

径向渐变

background-iamge：radial-gradient（方向，颜色……）；

shape 渐变的形状 默认 椭圆形圆形 circle

at position 渐变中心点的位置 方向

水平和垂直方向的值 数值百分比 参考元素的高度的百分比水平方位词 left right center垂直方位词 top bottom center 如果位置只有方位词，顺序可以换如果只写一个值，默认另一个值是center

<style>div {width: 500px;height: 300px;border: 1px solid #000;margin: 50px;/* 默认是椭圆形 */background-image: radial-gradient(red, blue);/* 渐变的形状--可以设置为圆形 */background-image: radial-gradient(circle, red, blue);/* at position 渐变中心点的位置*//* 方向01+02+03 *//* 01.数值 *//* 数值的坐标系:元素左上角为原点，向右是正值，向左是负值，向上是负值，向下是正值 */background-image: radial-gradient(circle at 400px 300px, red, blue);background-image: radial-gradient(circle at 500px -30px, red, blue);/* 02.百分比 *//* 参考元素的宽高 */background-image: radial-gradient(circle at 100% 100%, red, blue);/* 03.方位词 *//* left right center *//* top bottom center */background-image: radial-gradient(circle at right top, red, blue);/* 如果位置只有方位词 顺序可以换 */background-image: radial-gradient(circle at top right, red, blue);/* 方向是可以混搭的 */background-image: radial-gradient(circle at 10px bottom, red, blue);/* 如果只写一个值，默认另外一个方向是center */background-image: radial-gradient(circle at bottom, red, blue);}</style>

重复线性渐变

语法: background-image: repeating-linear-gradient(red 5%,blue 20%);

颜色必须是加数值或者百分比

<style>.box1 {width: 300px;height: 400px;border: 1px solid #000;margin: 50px;background-image: repeating-linear-gradient(red 5%, blue 20%);}</style><div class="box1"></div>

💡执行结果截图

重复径向渐变

语法: background-image: repeating-radial-gradient(red 5%,blue 20%);

颜色必须是加数值或者百分比

<style>.box2 {width: 300px;height: 400px;border: 1px solid #000;margin: 50px;background-image: repeating-radial-gradient(red 5%, blue 20%);}</style><div class="box2"></div

💡执行结果截图