学习日志

背景属性

background-clip 设置背景覆盖范围

border-box:背景显示区域到边框，默认值

padding-box:背景显示区域到内边距框

content-box:背景显示区域到内容框

background-origin 设置背景覆盖的起点

border-box:背景起点在边框左上角

padding-box:背景起点在内边距框左上角，默认值

content-box:背景起点在内容框左上角

background-size 设置背景的大小

auto 默认值

cover 图像拉伸到最大完全区域，可能有一部分显示不全

contain 将图像扩展至最大尺寸，以使其宽度和高度去完全适应内容区域

文本属性

text-overflow:设置文本溢出元素框时的处理方式

clip:裁剪文本的内容

ellipsis:显示省略号，用于代替被裁剪的文本

word-break:规定自动换行的方式

word-wrap:规定单词换行的的方式

盒模型属性

圆角边框

border-radius

可以同时设置1到4个值。

​ 如果设置1个值，表示4个圆角都使用这个值。

​ 如果设置两个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值。

​ 如果设置三个值，表示左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值。

​ 如果设置四个值，则依次对应左上角、右上角、右下角、左下角（顺时针顺序）。

还可以用斜杠设置

​ 水平方向/垂直方向

阴影

bpx-shadow

值：（x轴，y轴，模糊程度，模糊距离，颜色）

resize

none 默认值

both 可以调整宽高

horizontal 调整宽

vertical 调整高

注：需要元素的overflow属性，值可以时auto、hidden或者scroll

outline-offset

设置轮廓的偏移量

动画属性

transform

用于设置元素的变形。可以设置一个或者一个以上的变形函数。

translate(x,y) 表示水平方向移动x，垂直方向移动。也可以单独设置

rotate(angle) 表示元素顺时针旋转angle角度。

scale(x,y) 元素水平方向缩放比例x，垂直方向缩放比例y。也可以单位设置

skew(angleX,angleY) 表示元素沿着x轴方向移动angleX角度， 表示元素沿着y轴方向移动angleY角度。也可以单位设置

matrix(a,b,c,d,x,y) 将2D变形函数（旋转、缩放、移动以及倾斜）组合在一起

transform-origin

表示旋转的中心点，默认值为50% 50%。

第一个值可以设置为left right center 长度 百分比

第二个值可以设置为top bottom center 长度 百分比

3D变化属性

transform属性

rotateX 表示沿着X轴的旋转

rotateY 表示沿着Y轴的旋转

rotateZ 表示沿着Z轴的旋转

transform-style属性

flat 默认值

preserve-3d 子元素保留其3d的位置

perspective属性

设置成透视效果，透视效果为近大远小

perspective-origin属性

设置3D元素所基于的x轴和y轴，改变3D元素底部位置

backface-visibility属性

用于设置当元素背面面向屏幕时是否可见

hidden (背面不可见)

visible(背面可见，默认值)

css过渡属性

transition-delay

设置过渡的延迟时间

transition-durtion

设置过渡的过渡时间

transition-timing-function

设置过渡的时间曲线

transition-property

设置那条css使用过渡

transition

一条声明设置所有过渡属性

css3的动画属性

@kayframes 定义动画选择器

animation-name属性

定义动画名称，用于指定由规则定义的动画的一个或多个名称。

animation-delay属性

设置过渡的延迟时间

animation-duration属性

用于指定执行一个周期动画应该花多长时间。

animation-timing-function属性

是用来设置播放方式的，它可以指定定时函数，该函数定义动画对象随时间的速度。

取值如下：

ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。

linear：线性效果，速度将从开始到结束稳定。

ease-in：渐显效果，动画将缓慢启动，然后获得更多加速并稳定到持续时间结束。

ease-out：渐隐效果，动画将快速启动，然后减速并稳定到持续时间结束。

ease-in-out：渐显渐隐效果，它是组合了ease-in和ease-out。动画或过渡将开始缓慢，在中间加速，然后减速直至结束。

step-start：马上跳转到动画结束状态，动画或过渡将突然变为结束状态并保持在该位置直到动画结束。

step-end：动画或过渡保持其开始状态，直到动画执行结束，直接跳转到其动画结束状态。

step([,[start | end]])：

step()可以将转换的持续时间划分为相等大小的间隔；或指定输出百分比的变化是发生在间隔的开始还是结束。

animation-iteration-count属性

用于指定动画停止前播放动画循环的次数

初始值为“1”，表示动画将从头到尾播放一次；通常会取“infinite”值，表示无限循环播放。

animation-direction属性 该属性可能取的值：

normal：正常方向

reverse：动画反向运行，方向始终与normal相仿

alternate：动画会循环正反交替运动

animation-play-state属性

指定CSS 动画是正在运行还是暂停。

该属性可能取的值：

running：默认值，运动；

paused：暂停。

列表属性

column-count

数值元素应该被分隔的列数

column-width

设置列的宽度

columns

一条声明列宽和列数

column-gap

设置列之间的间隔

column-span

设置元素应该横跨的列数

column-rule-style

设置列之间间隔的样式

column-rule-color

设置列之间间隔的颜色

column-rule-width

设置列之间间隔的宽度

column-rule

一条声明设置列之间间隔的所有属性

今日所感

代码还是要多敲敲，多练习！需要更加熟悉属性！