跳到主要内容

版本

一、Css3​

1.1 边框​

  • border-radios: 添加圆角边框

  • border-shadow: 给框添加阴影（水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影））

  • border-image: 设置边框图像

  • border-image-source: 边框图片的路径

  • border-image-slice: 图片边框向内偏移

  • border-image-width: 图片边框的宽度

  • border-image-outset: 边框图像区域超出边框的量

  • border-image-repeat 图像边框是否平铺（repeat 平铺round 铺满 stretch 拉伸）

1.2 背景​

  • Background-size: 背景图片尺寸

  • Background-origin: 规定 background-position 属性相对于什么位置定位

  • Background-clip: 规定背景的绘制区域（padding-box，border-box，content-box）

1.3 渐变​

  • Linear-gradient（）: 线性渐变

  • Radial-gradient（）: 径向渐变

1.4 转换​

  • Transform: 应用于2D3D 转换，可以将元素旋转，缩放，移动，倾斜

  • Transform-origin: 可以更改元素转换的位置，（改变xyz 轴）

  • Transform-style: 指定嵌套元素怎么样在三位空间中呈现

  • rotate: 旋转 translate（x，y） 指定元素在二维空间的位移 scale（n）

  • Perspective（n）: 为 3D 转换translate、rotate、 scale

1.5 过渡​

  • Transition-proprety: 过渡属性名

  • Transition-duration: 完成过渡效果需要花费的时间

  • Transition-timing-function: 指定切换效果的速度

  • Transition-delay: 指定什么时候开始切换效果

1.6 动画​

  • Animation-name: 为@keyframes 动画名称

  • animation-duration: 动画需要花费的时间

  • animation-timing-function: 动画如何完成一个周期

  • animation-delay: 动画启动前的延迟间隔

  • animation-iteration-count: 动画播放次数

  • animation-direction: 是否轮流反向播放动画

1.7 文字​

  • Word-break: 定义如何换行

  • Word-wrap: 允许长的内容可以自动换行

  • Text-overflow: 指定当文本溢出包含它的元素，应该干啥

  • Text-shadow: 文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）