突变和渐变

洪水还是那个洪水，中国已经不是那个中国。

列车上遥望雨中的武汉

周末两天去了趟洪峰下的武汉，由于疫情和洪水的原因，两天基本都是待在家里，虽然毫不夸张武汉人民头顶上的水位已达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);

image.png image.png

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% 代表圆心在右上角）/

本周练习计划

前端练习小程序-第二周（7月13日-7月19日）