美文网首页
2020-02-12

2020-02-12

作者: 帅气十里不如你 | 来源:发表于2020-02-12 21:58 被阅读0次

一、英语学习总结

文档:2020-02-12.note

链接:http://note.youdao.com/noteshare?id=c86a4f670f98337ec78021f4e8dd3b03&sub=01BD625F1B3A47178063EAFF61A22B05

二、css、学习总结

        1.animation中的steps属性。   配合animation来使用的(跳转动画)如果添加了这个stpe就添加不了cubic-bezier。例子animation:run 4s steps(1,end)括号里面的值是可以变动的,现在我们填入1,他是在0%这段动画里面,以跳转的形式一步过渡完一个颜色,填入2就是分成两步过渡完.填的数越大,拆分的动画也就越细腻,但是不管填多少,它都是跳转动画.还有后面的end是什么意思呢?后面其实是可以填两个值的end还有发start .end:保留当前帧状态,直到这段动画时间结束;start:保留下一帧状态,直到这段动画时间结束

        2.“box-shadow”属性。      box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度(第三维)的错觉。语法分为五个部分组成。

            box-shadow:offset-x offset-y blur spread color position;

     (1)offset-x   第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边,而负值使阴影出现在元素的左边。

     (2)offset-y   第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的上边,而负值使阴影出现在元素的下边。

     (3)blur    第三个长度值代表阴影的模糊半径,举例说明,就像你在设计软件中使用高斯模糊滤镜。0值意味着阴影是完全实心和尖锐的,没有任何模糊。模糊数值越大,尖锐度越小,阴影越朦胧和模糊。负值是不被允许的,并会被处理成0。

      (4)spread    第四个,同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。

        (5)color颜色值,正如你期望的,是阴影的颜色。它可以是任何颜色单位。

        (6)position    box-shadow属性的最后一个值是一个可选的关键字,它代表着阴影的位置。默认情况下,这个值并而没有给出,这意味着阴影是一个外部阴影。我们能通过关键字inset使阴影变成内部阴影。

        (7)多重阴影   box-shadow 属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

        (8)圆形阴影    box-shadow 属性的边界半径是通过该元素的border-radius 属性来控制的。

        3.grid布局https://www.cnblogs.com/gongyue/p/8011951.html

相关文章

网友评论

      本文标题:2020-02-12

      本文链接:https://www.haomeiwen.com/subject/nhhhfhtx.html