小蜗牛764号的博客

linear-gradient线性渐变是一种两个以上颜色之间的平滑过渡效果。线性渐变为某一方向指向的渐变效果，如由左到右，上到下，左上到右下等。和径向渐变不同的是，径向渐变是一中心点向周围扩散的渐变，径向渐变为某一线性指向方向的渐变。线性渐变和径向渐变一样属于背景图片background-image一类，不属于颜色一类，只是通过对颜色进行渐变设置的一种背景图片。用法和径向渐变类似，用于可设置背景属性的元素组件。颜色断点也可以设置三种，或更多种，本文只演示了两种的情况。

radial-gradient径向渐变可以在网页的元素上创建一个从中心点往外的圆形或椭圆形的颜色渐变。常配合背景图片background-image进行使用。基本上能添加背景图片效果的元素组件，如按钮、标签、模型背景、文字等都可以添加径向渐变的效果。径向渐变可以理解为给背景添加图片的效果，图片不能够直接使用动画效果animation进行动画效果过渡转变的。本文只是简单说一下渐变的各种语法属性。没有专门对元素组件如按钮、标签、窗体背景、文本等举例使用。

animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`

本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。

关键帧keyframes是css动画的一种，主要用于定义动画过程中某一阶段的样式变化，可以在动画中定义多个状态。关键帧常配合animation(动画)使用。先创建一个动画效果，我们就命名为sun（太阳）/* 动画持续8秒，无限循环 */然后对sun（使用关键帧）90% {/* 在动画的90%时，太阳下移并放大 *//* 太阳颜色 */100% {/* 在动画的100%时，太阳继续下移 *//* 添加阴影 */由上方法，便可生成一个可以变化的太阳了。

前面的几篇博文用到了模糊(blur)和阴影(solid)的效果，这些效果有些属于filter(滤镜)的属性。filter还有其他属性，下面表格汇总相关的语法。内容语法说明模糊blur(A);A填像素值，如5px阴影a为水平方向阴影位置，正数px向右；b为垂直方向阴影位置，正数px向下；c为阴影的范围，px；d为颜色参数常用rgba的格式亮度e>1加亮度，e1加对比度，f

css中transform的属性虽然有多个，其实弄懂了平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew），后面的那些关于3d效果以及综合变换（如：平移+旋转+缩放等，自由组配）的属性就是这些前面4种效果的延伸和拓展。在3d的效果下/* 保留 3D 效果 */通常要添加，不然程序有些时候达不到预期的3d视图效果，只显示2d状态效果。通常设置于元素的父集中。此外，倾斜通常用于2d状态的变换，对于类似倾斜的3d的效果通常由rotate实现。

今天学习到关于table（表格）的css属性，为了让学习更有趣以及回顾往日的学习内容，笔者除了描写关于基本的宽、高、间距等属性外，还添加了前几天的博文提到“:hover”伪类选择器的使用，transition(过渡)的使用，以及给表格添加背景颜色或图片，模糊和阴影效果等。有时候自己对于某个知识了解后，要自己描写把它写出来真不容易。本文是在学习table表格中的css属性的同时，还结合了前面几天学到的知识transition、hover等。

在css中的:hover（悬停）伪类选择器，主要功能是我们用鼠标悬停在我们设置好的页面元素上时，用以触发我们设置的某一元素的属性效果。它不会改变原有的代码功能，但可以加强我们使用者的交互性。对一个超链接，如果我们鼠标悬停碰到它（移动鼠标碰到它），然后它出现了某种变化，如变大、变颜色等；或一个按钮，我们也用鼠标悬停碰到它的位置，原本方形变圆；又或者一张卡片，当鼠标悬停到它的位置时，它产生了阴影效果。网页有以上功能，这是不是可变得很有趣而丰富了呢？

CSS中的transition（过渡），根据字面意思就可以理解成一种变化状态的过程。当我们有一个方形，我们想让它变化成一个圆，持续2秒钟的变换；又或者粉色方形变换成蓝色圆形，持续3秒钟的变换，那么前面这些需求我们可以使用transition来实现。通过代码运行后演示，不难看出过渡是双向的。当我们鼠标悬停在组件上时，组件进行过渡动画，当鼠标离开组件时，也会触发进行过渡动画返回变化为初始状态。

在CSS中，我们常用属性创建圆角边框，可以单独设定每一个角的半径，或者统一设置所有角的半径。比如原本一个长方形模型，我们不想要它的直角效果，而是想使用圆角属性效果，这时候就用到border-radius了。当然看字面意思border-radius(边界-周围)也不难理解它的功能和意思。border-radius 还可以被动画处理，创建平滑的形状变换效果。这里会添加一个hover（悬停）状态，即我们鼠标悬停在我们设定的组件上时，让组件产生动画效果，详看后边例子。