2021-07-29 知识总结

CSS3浏览器前缀

-ms-box-shadow lE浏览器专属-moz-

-moz-box-shadow基于Gecko引擎的浏览器（如Firefox)-O-

-o-box-shadow Opera浏览器专属-webkit-

-webkit-box-shadow基于Webkit引擎的浏览器(如Chrome、Safari)

           /* word-break: break-all; 允许在单词内换行 可以强行阶段英文单词 达到换行效果

           word-break: keep-all; 不允许中文字断开 在标点符号后换行

           text-transform: capitalize; 文件中每个单词以大写字母开头

           text-transform: lowercase; 定义无大写字母 仅有小写字母

           text-transform: uppercase; 定义仅有大写字母

           text-transform: none;默认

           font-variant:small-caps:浏览器会显示小型大写做字母的字体 */

           /* word-wrap: break-word;在长单词活url地地址内部进行换行 将内容在边界内换行（不截断英文单词换行） */

背景渐变：

linear-gradient(线性渐变)和radial-gradient(径向渐变):可以让你在两个或多个指定的颜色之间显示平稳的过渡

线性渐变(Linear gradients) -向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)-由它们的中心定义

线性渐变：

至少定义两种颜色结点

语法：
background/background-image:
linear-gradient(2~多个颜色，颜色中间用逗号分隔)
linear-gradient(to方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)
linear-gradient**(度数deg,2~多个颜色，颜色中间用逗号分隔)【从上开始，顺时针】

加浏览器内核：
-webkit-linear-gradient (2~多个颜色，颜色中间用逗号分隔)
-webkit-linear-gradient (方向[1到2两个],2~多个颜色，颜色中间用逗号分隔)【注：方向没有to，是指明的方向】
-webkit-linear-gradient (度数deg,2~多个颜色，颜色中间用逗号分隔)【从右开始，逆时针】

径向渐变
语法:
background/background-image :
radial-gradient (2至多个颜色)在颜色后面添加百分比【从小到大顺序】
-webkit-radial-gradient (方位,颜色)
方位，形状，颜色
例：background:-webkit-radial-gradient(top,circle, black 5%,white 10%,black 15%);

重复渐变:repeating[颜色必须跟百分比，否则无法形成重复渐变的效果]【百分比从小到大】

背景大小设置
background-size:需要调整背景图片的大小

四类： 像素值【单个 看到设置为固定像素值，高度会等比例变化】【两个 第一个宽度第二个高度】
百分比【单个/两个】
参照像素值：
cover：背景图片把整个背景全部覆盖； contain：一边铺满，另一边等比例，保持始终在div范围内；

背景图片位置
background-clip：调整背景位置

content-box：将背景图片放在内容区
padding-box：将背景图片放在内边距范围内
border-box：将背景图片放在边框范围内【默认】

过渡效果
transition-property：需要过渡的样式，默认all 、
transition-duration：运动时间 默认0s
transition-delay：延迟时间 默认0s
transition-timing-function：运动形式 默认ease
A.ease(慢快慢) B.linear(匀速) ease-in(加速) C.ease-out(减速)
D.ease-in-out(先加速后减速) E.cubic-bezier贝塞尔曲线(x1,y1,x2,y2)
http:cubic-bezier.com F.steps()实现一个关键逐帧动画的功能
可直接写transition：属性值