css渐变色
最近要做一个类似于数据看板的页面，使用bootstrap5做基础的样式，一个页面划分为n个长宽不一的大小方块，需求要求背景色不用单色，要用渐变色，看起来会比较有质感，特意研究了下css的渐变色，这里记录下
<!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> /* css线性渐变语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 使用角度时：0deg 等于向上（to top），值 90deg 等于向右（to right），值 180deg 等于向下（to bottom）*/ /* css径向渐变语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color); 默认地，shape 为椭圆形，size 为最远角，position 为中心。*/ .big-box { display: flex; } .small-box { width: 100px; height: 80px; margin: 5px; } /* 设置从下到上，颜色依次为red、green的渐变 */ .line1 { background-image: linear-gradient(to top, red, green); } /* 设置从右到左，颜色依次为red、green的渐变 */ .line2 { background-image: linear-gradient(-90deg, red, green); } /* 设置从左上到右下，颜色依次为red、yellow、green的渐变 */ .line3 { background-image: linear-gradient(to bottom right, red, yellow, green); } /* 设置从上到下，高度为50%颜色为red到yellow的渐变，剩余50%由blue填充 */ .line4 { background-image: linear-gradient(red 0%, green 50%, blue 50%); } /* 设置从左到右，带有不透明度颜色的渐变 */ .line5 { background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); } /* 设置从左到右，重复渐变 */ .line6 { background-image: repeating-linear-gradient(to right, red 0%, green 20%); } /* 设置形状为椭圆形，圆心位置在中心，从里到外颜色依次为red、yellow、green的渐变 */ .radial1 { background: radial-gradient(red, yellow, green); } /* 设置形状为椭圆形，圆心位置在右下，从里到外颜色依次为red、yellow、green的渐变 */ .radial2 { background: radial-gradient(at right bottom, red, yellow, green); } /* 设置形状为圆形，圆心位置在水平方向50%，垂直方向50%，从里到外颜色依次为red、yellow、green的渐变 */ .radial3 { background: radial-gradient(circle at 50% 50%, red, yellow, green); } /* 设置形状为椭圆形，从里到外颜色依次为red、yellow、green的渐变，色标之间距离不均匀 */ .radial4 { background-image: radial-gradient(red 5%, yellow 15%, green 60%); } /* 设置水平半径为50px，垂直半径为40px，圆心位置在水平方向50%，垂直方向50%，从里到外颜色依次为red、yellow、green的渐变 */ .radial5 { background: radial-gradient(50px 40px at 50% 50%, red, yellow, green); } /* 设置重复径向渐变 */ .radial6 { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); } </style> </head> <body> <div class="big-box"> <div class="small-box line1"></div> <div class="small-box line2"></div> <div class="small-box line3"></div> <div class="small-box line4"></div> <div class="small-box line5"></div> <div class="small-box line6"></div> </div> <div class="big-box"> <div class="small-box radial1"></div> <div class="small-box radial2"></div> <div class="small-box radial3"></div> <div class="small-box radial4"></div> <div class="small-box radial5"></div> <div class="small-box radial6"></div> </div> </body> </html>
颜色搭配正确的话，确实比单色看起来要好很多
