黑马程序员技术交流社区

标题: 技术:渐变原理 + 感言:学习经历 [打印本页]

作者: vigo-wu    时间: 2019-1-15 22:32
标题: 技术:渐变原理 + 感言:学习经历
本帖最后由 vigo-wu 于 2019-1-15 22:35 编辑
技术部分(关于c3渐变原理的总结):
径向渐变(radial-gradient):
渐变中心点:
1:渐变颜色从渐变中心点向外辐射
2:通过position来设置在盒子里的中心点(语法:at x y)
边缘形状轮廓:
1:结束形状,径向渐变的中心点至边缘形状以及其延伸的部分,由连续缩放的若干同心轮廓组成,这个轮廓由设定的边缘形状决定
2:每个轮廓均为纯色,颜色由渐变射线上相应横切点所定义的颜色决定
3:取值为circle(圆形),ellipse(默认值:椭圆形)(语法:shape at position)
色值结束点:
1:用于设定虚拟渐变射线的变化方式,由中心点水平变化至右侧。色值结束点由百分比设定时,则是相对于终点为渐变射线与边缘形状相交点的渐变半径,渐变半径的终点位置即为100%。该值越小,渐变半径越小,比如说设定为20%,渐变半径就是中心点相对于终点的半径只有20%为有渐变效果(色值起始点-色值结束点),剩下的80%填充色都为色值结束点的颜色
虚拟渐变射线:
1:色值结束点用于设定虚拟渐变射线的变化方式,由中心点水平变化至右侧
2:渐变射线由点组成,每个点都对应不同的色值,而该色值决定了渐变线与每个轮廓的横切点对应色值的轮廓颜色
图解:

线性渐变(linear-gradient):
渐变线:
1:由包含渐变图形的中心点和一个角度来定义
2:渐变线上的颜色值由不同的点定义(包括起始点,终点以及两者之间的可选的中间点,可以有多个中间点)
3:其上的每个点具有两种或多种的颜色,且轴上的每个点都具有独立的颜色
起始点:
1:是渐变线上代表颜色起始值的点
2:由渐变线和过容器最近顶点的垂直线的交叉点定义起始点
终点:
1:是渐变线上代表最终颜色值的点
2:由渐变线和过容器最近的顶点的垂直线的交叉点定义起始点(起始点的对称点)
着色线:
1:linear-gradient() 函数构建一系列垂直于渐变线的着色线,每一条着色线的颜色则取决于与之垂直相交的渐变线上的色点
图解:
线性渐变图示


渐变方向







感言部分:
“一个人能走多远,看他与谁同行,一个人有多优秀,看他有什么人指点,一个人有多成功,看他与什么人相伴,有几位好同伴,将会成就你的一生”。在黑马学习的时间掐指一算,有两个多月了,在感叹时间晃眼就流逝的同时,只能说充实的学习生活总是过的非常快的,同时在这期间也有很多的收获,对学习的选择与行动也有了新的理解,学习不是一个任务,生活不是一种负担,它是一种乐趣,它是一种享受,它是一种历练。
在学习中成长,在成长中实践。人生中就是这样,每一次的学习就是一次实 践的机会。每一次的实践就是一次挑战,我们能害怕吗?答案是肯定的:“不能!”。 不管是在什么情况下,都是不能,不会,也不可以害怕挑战。之所以转行到it行业,并参加培训班, 目的就是增强我们挑战的信心。我不知道别人通过培训学到了多少,感受到了多 少,了解到了多少。只知道通过培训自己感悟颇深。 首先要说明的一点就是通过这次培训我学到了很多,见过的听过的,没见过 的没听过的统统包含在内。 HTML 几天的学习中,学习了 html 的基本标记,这大概是学习一门语言最基 础的一部分吧。但是也不是说背一背就解决问题的,选择 IT,程序员这一方面, 只要多练习,多敲代码感觉就好了,所以熟练的使用这些标记其实不是很大的问 题,对自己来说,比较难的是一个表格和框架,也许会有人说,表格有什么难的, 就行列的问题啊,但是不知道为什么,在学习的那几天对于表格的学习 和接受能力都没有别的那么好,表格的整体框架能搭出来,但是就是对于表格的 美化总做不到自己心里所预期的那样。其实练习的话也是挺多的,对于表格的网 页练习做了应该也有一二十个的,但是就是没那么理想,所以这方面的话也是需 要自己多加练习和修正的,因为表格的用处还是挺大的。HTML 的学习方面还有 框架和表单,框架的话,就是一个网页的主体了,网页的大致形式基本上从你的 框架结构就可以知道的,学习框架,重要的就是网页的布局如何划分,然后利用 框架的嵌套,浮动就可以解决的,学习过程也不会是很大的难度。 再者就是 CSS,CSS 课程虽然学习时间不长,但是却是更应该学好的一个模 块。因为我们都知道,在正真的开发中,CSS 的作用起到了决定性,一个网页做 得优劣,完全取决与 CSS 的掌握。CSS 就是网页样式,一个网页的整体美感,在 你确定了框架之后,就看你的 CSS 样式的添加了,所以一直以来都很想把 CSS 学 好。记得 CSS 学习的那几天,自己的消化还是很好的,自己去独立完成练习的时 候也是没有太大难度的,但是不知道是为什么,到后面学习 JS 的时候,操作 CSS 时居然会吧 CSS 和 HTML 弄的有点混淆,这一点一直没做好。CSS 的学习还有一 个地方就是浮动,因为存在块元素和行内元素,块元素因为其本身特性,一个块 元素标记他要占用一整行的空间,而一个行内元素他只能占用行内的一些空间, 但是在实际操作中,很多时候我们却要想将多个块元素排在同一行,或者将多个 行内元素排在不同行,这时候就可以使用浮动的方法来实现,浮动最主要做的就 是这个,唯一要记住的一点就是做了浮动之后,如果他的父元素是没有进行匡高 的设定的话,是不是要进行清除浮动,防止下面的操作也是有浮动的。 JS 学习不多,只是初步了解,自己也很少练习,因为练习的时间只要是用于 html 和 CSS。在 JS 中取得元素 id 并修改其样式,这些看起来很容易的操作,但 却不是想象中的那么简单,很多时候操作着就乱了,这应该是我练习少的缘故, 加上 CSS 把握不是很好。今后要勤加练习。









欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2