网站建设有哪些家,美发店网站源码,用enfold做的网站,有关建设网站的问题我的学习笔记——CSS背景渐变(Gradients)详解 一.线性渐变#xff08;Linear Gradients#xff09;
1.语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);2.方向direction :向下/向上/向左/向右/对角方向,默认方向为从上至下 ①向下线性渐…我的学习笔记——CSS背景渐变(Gradients)详解 一.线性渐变Linear Gradients
1.语法
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);2.方向direction :向下/向上/向左/向右/对角方向,默认方向为从上至下 ①向下线性渐变(默认)
background:linear-gradient(pink,DeepSkyBlue);②向上线性渐变 background:linear-gradient(to top,pink,DeepSkyBlue);③向左线性渐变 background:linear-gradient(to left,pink,DeepSkyBlue);④向右线性渐变
background:linear-gradient(to right,pink,DeepSkyBlue);⑤对角方向线性渐变 补充:关于对角的定义,来自菜鸟https://www.runoob.com/css3/css3-gradients.html 角度是指水平线和渐变线之间的角度逆时针方向计算。换句话说0deg 将创建一个从下到上的渐变90deg 将创建一个从左到右的渐变。 但是请注意很多浏览器Chrome、Safari、firefox等的使用了旧的标准即 0deg 将创建一个从左到右的渐变90deg 将创建一个从下到上的渐变。换算公式 90 - x y 其中 x 为标准角度y为非标准角度。 background:linear-gradient(45deg,pink,DeepSkyBlue);3.颜色 使用多个颜色
background:linear-gradient(to right,pink,DeepSkyBlue,Aqua,Gold,OrangeRed);background:linear-gradient(135deg,pink,DeepSkyBlue,Aqua,Gold,OrangeRed);4.支持透明度设置 background:linear-gradient(rgba(255,182,193,0.7),rgba(0,191,255,0.7));5.支持设置纯色
//使用像素点设置
background:linear-gradient(to right,pink 0,pink 300px,DeepSkyBlue 300px ,DeepSkyBlue 600px);//使用百分比设置
background:linear-gradient(to right,pink 0,pink 300px,DeepSkyBlue 300px ,DeepSkyBlue 600px);6.重复的线性渐变repeating-linear-gradient background:repeating-linear-gradient(to right,pink 10%,DeepSkyBlue 20% );二. 径向渐变(Radial-Gradient)
1.语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);2.方向 由里向外渐变 background:radial-gradient(pink ,DeepSkyBlue );3.设置固定颜色 background:radial-gradient(pink 50px,DeepSkyBlue 50px );4.形状 ①默认为elipse椭圆. background:radial-gradient(pink ,DeepSkyBlue );②circle圆形. background:radial-gradient(circle,pink ,DeepSkyBlue );5.支持多个颜色 background:radial-gradient(circle,pink,DeepSkyBlue,Aqua,Gold,OrangeRed );6.支持纯色样式 background:radial-gradient(circle,pink 50px,DeepSkyBlue 50px ,DeepSkyBlue 100px );7.第一个参数shape size at position ①第一个参数的第一个参数 shape:设置形状 cicle圆形或者默认椭圆 ②第一个参数的第二个参数 size:设置半径 传一个值
background:radial-gradient(200px,pink ,DeepSkyBlue );半径传两个值:默认椭圆,第一个表示横向半径,第二个表示纵向半径 ③关键字 closest-side/closest-corner/farthest-side/farthest-corner ,这个取决于圆心的位置,圆心的位置表示前面要加at closest-sid取圆心距离边框最近的的距离作为渐变的半径 farthest-side取圆心位置距离边框最长的距离作为渐变的半径 closest-corne取圆心位置距离最短的角的距离作为渐变的半径 farthest-corner取圆心位置距离最长的角的距离作为渐变的半径 /*closest-side取圆心位置距离边框最短的距离作为渐变的半径*/background: radial-gradient(closest-side, pink, Deepskyblue);/*40%只写一个表示圆心位置为40% 50% 取最短则为40%*/background: radial-gradient(closest-side circle at 40%, pink, Deepskyblue);background: radial-gradient(closest-side circle at 20% 30%, pink, Deepskyblue);/*closest-corne取圆心位置距离最短的角的距离作为渐变的半径*/background: radial-gradient(closest-corner, pink, Deepskyblue);background: radial-gradient(closest-corner circle at 40%, pink, Deepskyblue);background: radial-gradient(closest-corner circle at 10% 10%, pink, Deepskyblue);/*farthest-side取圆心位置距离边框最长的距离作为渐变的半径*/background: radial-gradient(farthest-side, pink, Deepskyblue);background: radial-gradient(farthest-side circle at 40%, pink, Deepskyblue);background: radial-gradient(farthest-side circle at 20% 80%, pink, Deepskyblue);/*farthest-corner取圆心位置距离最长的角的距离作为渐变的半径*/background: radial-gradient(farthest-corner, pink, Deepskyblue);background: radial-gradient(farthest-corner circle at 40%, pink, Deepskyblue);background: radial-gradient(farthest-corner circle at 10% 80%, pink, Deepskyblue);8.重复的径向渐变 background: repeating-radial-gradient(pink 10%,Deepskyblue 20%);3D球 border-radius: 50%;background: radial-gradient(200px circle at 50px 50px ,rgba(0,191,255,0.1),rgba(0,191,255,0.9));box-shadow: 2px 2px 5px 1px deepskyblue;
