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中使用自定义的字体名进行使用；
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。