20200909冯佳丽

学习日志

背景属性

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

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

今日所感

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

评论

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1