前端设计>知识整理>正文
1.什么是渐变
渐变指定是多种颜色平缓变换的一种显示效果。
2.渐变的主要因素
1.色标:一种颜色及其出现的位置
2.一个渐变是由多个色标组成(至少两个)
3.渐变分类
1.线性渐变
以直线的方向来填充效果
2.径向渐变
以圆形的方式来实现填充
3.重复渐变
将线性渐变或径向渐变 重复几次实现填充
4.渐变详解
1.线性渐变
属性:background-image
取值:linear-gradient(angle,color-point1,color-point2,....);
1.angle
表示渐变填充的方向或角度
取值:
1.关键字
to top 从下向上填充渐变色
to bottom 从上向下填充渐变色
to left 从右向左填充渐变色
to right 从左向右填充渐变色
2.角度值
0deg 从下向上填充,等同于to top
90deg 从左向右填充,等同于to right
180deg 从上到下填充,等同于to bottom
270deg 从右向左填充,等同于to left
2.color-point
色标:颜色 及其 位置
取值:颜色 以及 位置的组合,中间用空格分开
ex:
1.red 0%
在填充方向的开始位置处颜色为红色
2.green 50%
到填充方向一半的位置处,颜色变为绿色
3.blue 200px
到填充方向的200px的位置处,颜色变为蓝色
2.径向渐变
属性:
background-image:radial-gradient([size at position],
color-point1,...);
size at position:
size:半径,以px为单位的数值
position:圆心所在位置
1.x y 具体数值
2.x% y% 元素宽和高的占比
3.关键字
x:left,center,right
y:top,bottom
ex:
100px at right top
半径 右上角位置
3.重复渐变
1.重复线性渐变
background-image:repeating-linear-gradient
(angle,...);
color-point:位置一定要给绝对数值(px),不要用相对单位%
2.重复径向渐变
background-image:repeating-radial-gradient
([size at position],...);
本文链接:https://www.weguiding.com/zhishi/193.html
- 上一篇:没有了
- 下一篇:HTML页面自动清理js、css文件的缓存(自动添加版本号)
猜你喜欢
- 19-01-24 HTML 文本格式化容易忽略的标签
- 19-01-24 前端常见跨域解决方案整理
- 19-01-24 viewport
- 19-01-24 Web前端开发代码规范——HTML/CSS规范
- 19-01-24 页面渲染优化
- 19-01-24 可能用到的meta标签
- 19-01-24 4种盒子/容器垂直水平居中的方案
- 19-01-24 meta标签及用法详解
- 19-01-24 CSS尺寸与边框
- 01-24meta标签及用法详解
- 01-24渐变样式设置
- 01-24HTML 文本格式化容易忽略的标签
- 01-24CSS尺寸与边框
- 01-244种盒子/容器垂直水平居中的方案
- 01-24Web前端开发代码规范——HTML/CSS规范
- 01-24页面渲染优化
- 01-24前端常见跨域解决方案整理
- 01-24viewport
- 01-24Web前端开发代码规范——HTML/CSS规范
- 01-24页面渲染优化
- 01-24可能用到的meta标签
- 01-244种盒子/容器垂直水平居中的方案
- 01-24meta标签及用法详解
- 01-24前端常见跨域解决方案整理
- 01-24viewport
- 01-24Web前端开发代码规范——HTML/CSS规范
- 01-24页面渲染优化
- 01-24可能用到的meta标签
- 01-244种盒子/容器垂直水平居中的方案
- 01-24meta标签及用法详解
- 图文推荐