洪水还是那个洪水,中国已经不是那个中国。
周末两天去了趟洪峰下的武汉,由于疫情和洪水的原因,两天基本都是待在家里,虽然毫不夸张武汉人民头顶上的水位已达3米高,但是很明显经过98年的特大洪灾,有三峡大坝强大的蓄洪能力,江边住宅搬迁改造变江滩公园,有长江大堤防线守卫,武汉在应对这次洪灾从容了很多。
周末由于出门在外,借了电脑完成了两个作业,但是新浪微博的登陆程序略微复杂只做了一半,留给这个周完成,总共做了6个小练习,上周计划基本完成。
下面简单复盘一下获得的新技能
linear-gradient - 渐变效果
CSS
linear-gradient()
函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>
数据类型,是一种特别的<image>
数据类型。
这个函数可以作出非常酷炫的渐变效果,在CSS样式中应用非常广泛
/* 渐变轴为45度,从蓝色渐变到红色 /
linear-gradient(45deg, blue, red);
/ 从右下到左上、从蓝色渐变到红色 /
linear-gradient(to left top, blue, red);
/ 从下到上,从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
text-transform - 控制文本的大小写
可选值
none
默认。定义带有小写字母和大写字母的标准的文本。
capitalize
文本中的每个单词以大写字母开头。
uppercase
定义仅有大写字母。
lowercase
定义无大写字母,仅有小写字母。
inherit
规定应该从父元素继承 text-transform 属性的值。
hover
.main:hover li{ width:40px; } 鼠标放上.main,所有li的宽度变成40px;
.main li:hover{ width:600px; } 鼠标放在某个li上,宽度变宽,覆盖之前的宽度,达到百叶窗展开效果
background-clip
设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。
background-clip: border-box; /*背景延伸至边框外沿(但是在边框下层)。*/
background-clip: padding-box; /*背景延伸至内边距外沿。不会绘制到边框处。*/
background-clip: content-box; /*背景被裁剪至内容区(content box)外沿。*/
background-clip: text; /*背景被裁剪成文字的前景色。*/
clip-path - 剪切路径
使用裁剪方式创建元素的可显示区域。
clip-path:circle(80px at 0% 50%); /直径80px,圆心在左边中点(0% 0% 代表圆心在右上角)/