手把手整理CSS3知识汇总【思维导图】

1、手把手整理css3知识汇总【思维导图】手把手收拾css3学问汇总【思维导图】css3学问汇总思维导图请见文章底部这两天总结了一下css3中的基本学问点，没有做到很全面，由于之前也记过一些笔记，就没有再收拾成文档。这里我会把之前的笔记拍照贴出来，基本都是一些很零碎的小学问点，需要大家平常多敲代码，多翻看笔记，以加深记忆，从而对css娴熟运用。前面也收拾几篇关于css3104个学问点汇总和55 个提高css 开发效率的必备片段，有爱好的小伙伴可以看看：关于前端css写法104个学问点汇总（一）关于前端css写法104个学问点汇总（二）手把手教你55 个提高css 开发效率的必备片段手把手教你利用c

2、ss控制文本溢出截断省略解决计划合集css3 模块包括：手把手收拾css3学问汇总【思维导图】css3 圆角边框：border-radius:25px;css3 边框阴影：css3 边框： border-imagebackground-size 属性：第一个值设置宽度，其次个值设置高度。假如只设置一个值，则其次个值会被设置为 "auto"background-clip： 属性规定背景的绘制区域。border-box：背景被裁剪到边框盒。padding-box：背景被裁剪到内边距框。content-box：背景被裁剪到内容框。css3 文本阴影text-sha

3、dow：水平阴影的位置 垂直阴影的位置 可选含糊的距离 可选阴影的色彩word-wrap:break-word 在长单词或 url 地址内部举行换行font-family：namefont-stretch：可选。定义如何拉伸字体。默认是 "normal"font-style：定义字体的样式font-weight：定义字体的粗细translate(x,y)：定义 2d 转换，沿着 x 和 y 轴移动元素。translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。translatex(n) ：定义 2d 转换，沿着 x

4、轴移动元素。translatey(n) ：定义 2d 转换，沿着 y 轴移动元素。transform: rotate(30deg); 值 rotate(30deg) 把元素顺时针旋转 30 度。手把手收拾css3学问汇总【思维导图】transform: scale(2,4); 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。scalex(n)：定义 2d 缩放转换，转变元素的宽度。scaley(n)：定义 2d 缩放转换，转变元素的高度。手把手收拾css3学问汇总【思维导图】通过 skew() 办法，元素翻转给定的角度，按照给定的水平线（x 轴）和垂直线（y 轴）参数：tran

5、sform: skew(30deg,20deg); 围绕 x 轴把元素翻转 30 度，围绕 y 轴翻转 20 度。skew(x-angle,y-angle)：定义 2d 倾斜转换，沿着 x 和 y 轴。skewx(angle)：定义 2d 倾斜转换，沿着 x 轴。skewy(angle)：定义 2d 倾斜转换，沿着 y 轴。手把手收拾css3学问汇总【思维导图】transform-origin ： 转变被转换元素的位置。perspective ： 设置元素被查看位置的视图transition-timing-function 属性规定过渡效果的速度曲线。keyframes ：规定动画。animation: name duration（时光） timing-function delay iteration-count（infinite） direction（是否应当轮番反向播放动画。alternate：动画应当轮番反向播放。）;手把手收拾css3学问汇总【思维导图】若有感爱好的小伙伴，需要css3思维导图原图的，关注我，私信回复猎取：css3思维导图关于前端css写法104个学问