1.transform

transform是设置变形方式；

rotate() 旋转；参数只有一个，旋转单位deg；

translate() 移动；两个参数,第一个是在x轴，第二个是在y轴上；单位px；数值可负可正；

skew() 倾斜；两个参数，第一个是在x轴上的角度，第二个是在y轴上角度；单位deg；

scale() 缩放；默认是1，比1大是放大，比1小是缩小，为0时候隐藏(此隐藏仍然占据页面位置)；参数一个是宽高同时设置，两个是分别设置；

以上都是transform的属性值，写多个样式，可用空格隔开

2.transition

transition是设置过渡动画；

transition-property：height || width || backgroundColor || all; 设置变化样式的过渡动画；可以单独指定某一个样式的变化添加过渡动画，也可以使用all对所有的变换添加过渡动画；

transtion-duration：2s; 设置过渡动画的时间；

transtion-timing-function 设置过渡的动画的执行速率

值：ease 默认值；低速开始，慢慢加快，最后变慢

linear 匀速

ease-in 低速开始，一直加快

ease-out 先快后满

ease-in-out 先慢加快再变慢

cubic-bezier 自定义曲线

3.线性渐变

background-image：linear-gradient() 创建一个线性渐变的图像

第一个参数是设置渐变方向(默认从上向下渐变)

to right || left || top || bottom || left top(左上角) 设置渐变终点的方向

同样也可以通过角度(单位deg)旋转渐变的方向(默认0度)

第二个至最后的都是渐变的颜色

颜色支持英文单词、十六进制(#aca)、rgb(0,0,0)

每个颜色后面可以通过空格连接该颜色所占的比例(像素值或者百分比)

background-image: radial-gradient() 径向渐变(当元素的宽高不一致的时候，表现为椭圆)

第一个参数是设置圆心位置

farthest-corner 从圆心到最远的角(默认)

closest-corner 从圆心到最近的角

farthest-side 从圆心的最远边

closest-side 从圆心的最近边

example：

p{
    width:800px;
    height:800px;
    background-image: radial-gradient(closest-side circle at 30% 30%,
        rgb(247, 10, 10),rgb(250, 250, 6) 50%,rgb(204, 80, 35),black);

}

4.背景扩展

background-attachment: fixed; 设置背景图片不随着标签的滚动而滚动

background-origin：设置backgroundPosition相对于哪里定位

padding-Box(默认) 把背景图片的原点设置在包含内边距的的左上角

border-Box 把背景图片的原点设置在盒模型的border-Box的左上角

content-Box 把背景图片的原点设置在盒模型的content-Box的左上角

background-clip：设置哪些范围显示背景图片

border-Box(默认) 边框处及内显示图片

padding-Box 内边距及以内显示图片

content-Box 内容区内显示图片

background-blend-mode: overlay; 设置多层背景的时如何显示

lighten 变亮模式

color 颜色模式

overlay 叠加模式

5.滤镜

filter：blur() 高斯模糊默认是0 取值范围{0，infinite}；单位px；值越大越模糊；

filter 设置滤镜

属性值：

brightness() 设置亮度默认是1 设置比1小的数会变暗设置比1大的数会变亮取值范围[0,∞]

grayness() 设置灰度默认是0 取值范围[0-1]

sepia() 设置褐色默认是0 取值范围[0-1]

saturate() 设置饱和度取值范围[0-∞]

invert() 设置反色默认是0 取值范围[0-1]

hue-rotate() 设置色相旋转取值范围是[0-360deg]

opacity() 设置透明度取值范围[0-1]

drop-shadow() 设置阴影

6.元素阴影

Box-shadow：设置元素阴影

属性值

第一个参数阴影在水平方向的偏移量正值阴影在右边，负值阴影在左边；

第二个参数阴影在垂直方向上的偏移量，正值阴影在下边，负值阴影在上边；

第三个参数只能是正值值越大阴影越模糊如果值为0 表示阴影不具有模糊效果

第四个参数正值阴影延伸扩大负值阴影缩小

第五个参数阴影颜色(英文别名，十六进制，rgb)

第六个参数 insert 设置阴影在元素内部显示

如果一个元素需要多个阴影可以使用，连接；注意多层阴影会有阴影覆盖情况

6.文本阴影

Box-shadow：设置文本阴影

第一个参数阴影在水平方向的偏移量，正值阴影在右边，负值阴影在左边

第二个参数阴影在垂直方向上的偏移量，正值阴影在下边，负值阴影在上边；

第三个参数只能是正值值越大阴影越模糊如果值为0 表示阴影不具有模糊效果

第四个参数阴影颜色(英文别名，十六进制，rgb)

7.引入字体包

 @font-face{
            /* 相对路径引入*/
            src:url(./RuGuoAnLianYongBuLuoMu-2.ttf);
            /* 引入的字体包取个名 */
            font-family: newFont;
        }
p{
            font-family: newFont;
            font-size: 50px;
            font-weight: 900;
            text-align: center;
        }

引入之后就可以在font-family中使用自定义的字体名进行使用；

原文地址：https://www.jb51.cc/wenti/3287420.html

transform、transition、线性渐变、背景图片扩展、滤镜、元素阴影、文本阴影、字体样式引入