14
2020
12

css有哪些特性?

过渡

  transition-property:width

  transition-duration:1s

  transition-timing-function:linear

  transition-delay:2s

动画

animation:动画名称,一个周期花费时间,云顶曲线(默认ease),动画延迟(默认0),动画播放次数(默认1),是否反向播放动画(默认normal),是否暂停动画(默认running)


形状转换

transform: 使用于2D或3D转换的元素

transform-origin: 装换元素的位置(围绕哪个点进行装换).默认(x,y,z);

选择器


阴影


box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始的方向(默认是从里向外,设置inset就是从外往里)


边框图片

border-image: 设置图片路径 设置边框背景图的分割方式 设置或检索对象的边框厚度 设置或检索对象的边框背景图向外扩展 设置边框图片的平铺方式


边框圆角

  border-radius: n1 n2 n3 n4;

/* n1-n4 四个值得顺序是左上角,右上角,右下角,左下角 */

反射(倒影)

box-reflect: 方向[above-上|below-下|right-右|left-左],偏移量,遮罩图片


文字

换行 word-break:normal(默认使用浏览器默认的换行规则)|break-all(允许在单词内换行)|keep-all(只能在半角空格或连字符处换行)

超出省略号

overflow: hidden;

white-space: nowrap;

text-overflow:ellipsis;

多行省略号

overflow:hiden;

text-overflow:ellipsis;用省略号"..."隐藏超出范围的文本

display:-webkit-box;  //将对象作为弹性伸缩盒子模型显示

-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数

-webkit-box-orient:vertical;设置弹性盒对象的子元素的排列方式

文字阴影

text-shadow: 水平阴影 垂直阴影 模糊阴影 阴影颜色


颜色

rgba(rgb颜色值,a为透明度)


渐变

线性渐变和径向渐变


filter(滤镜)

filter: 滤镜效果(透明度)


弹性布局

弹性布局就是flex布局


-栅格布局


栅格化布局。就是grid


盒模型

border-box 边框和内边距包含在元素的宽高之内

content-box 边框和内边距不包含在元素的宽高之内

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。