html5 css3思维导图,手把手整理CSS3知识汇总【思维导图】
手把手整理CSS3知识汇总【思维导图】
CSS3知识汇总思维导图请见文章底部
这两天总结了一下CSS3中的基本知识点,没有做到很全面,因为之前也记过一些笔记,就没有再整理成文档。这里我会把之前的笔记拍照贴出来,基本都是一些很零碎的小知识点,需要大家平时多敲代码,多翻看笔记,以加深记忆,从而对CSS熟练运用。
前面也整理几篇关于CSS3104个知识点汇总和55 个提高CSS 开发效率的必备片段,有兴趣的小伙伴可以看看:
《关于前端CSS写法104个知识点汇总(一)》
《关于前端CSS写法104个知识点汇总(二)》
《手把手教你55 个提高CSS 开发效率的必备片段》
《手把手教你利用CSS控制文本溢出截断省略解决方案合集》
CSS3 模块包括:
手把手整理CSS3知识汇总【思维导图】
CSS3 圆角边框:border-radius:25px;
CSS3 边框阴影:
CSS3 边框图片: border-image
background-size 属性:
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"
background-clip: 属性规定背景的绘制区域。
border-box:背景被裁剪到边框盒。
padding-box:背景被裁剪到内边距框。
content-box:背景被裁剪到内容框。
CSS3 文本阴影
text-shadow:水平阴影的位置 垂直阴影的位置 可选模糊的距离 可选阴影的颜色
word-wrap:break-word 在长单词或 URL 地址内部进行换行
font-family:name
font-stretch:可选。定义如何拉伸字体。默认是 "normal"
font-style:定义字体的样式
font-weight:定义字体的粗细
translate(x,y):定义 2D 转换,沿着 X 和 Y 轴移动元素。
translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
translateX(n) :定义 2D 转换,沿着 X 轴移动元素。
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 轴)参数:
transform: 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个知识点汇总(一)》
《关于前端CSS写法104个知识点汇总(二)》
《手把手教你55 个提高CSS 开发效率的必备片段》
《手把手教你利用CSS控制文本溢出截断省略解决方案合集》
html5 css3思维导图,手把手整理CSS3知识汇总【思维导图】相关推荐
- 如何清晰地思考:近一年来业余阅读的关于思维方面的知识结构整理(附大幅思维导图)
如何清晰地思考:近一年来业余阅读的关于思维方面的知识结构整理(附大幅思维导图) By 刘未鹏(pongba) C++ 的罗浮宫(http://blog.csdn.net/pongba) TopLang ...
- Java知识汇总——思维导图
Java知识汇总--思维导图 Java知识点汇总,从基础到常用的API.还有常用的集合类,总结的很详细.图片是从论坛里面找到的,整理下来以便常复习.这是目前看到的比较详细完整的思维导图. 1.Java ...
- 高等数学思维导图_高等数学 极限与连续 知识技巧思维导图 [21考研上岸之旅]...
Hello World,我的朋友,这里是一颗小白蛋,大千世界,很高兴以这样的方式与你相遇 前言 好久不见,本颗白蛋没有忘记学习分享,这一次给大家带来考研高数的知识技巧总汇图. 2021张宇基础30讲 ...
- 如何把大咖的知识,内容、思维,瞬间变成你的知识内容思维的秘诀
核心关键词: 抄改换. 落地步骤. 抄:搜索.搜集. 主动,有意识的搜索关键词(同行) 随时收集(百业) 改:整理. 1.发现别人好的马上复制,删减,修改.记录下来. 工具:拍照,影响 ...
- Java知识汇总-思维导图
2019独角兽企业重金招聘Python工程师标准>>> Java知识点汇总,从基础到常用的API.还有常用的集合类,总结的很详细.图片是从论坛里面找到的,整理下来以便常复习.这是目前 ...
- java知识汇总—思维导图
学习java不难,难的是你懒的学,好啦废话不多说,请看思维导图,分为五个部分 一.java知识基础 二.面向对象 三.常用的API 四.集合IO 五.多线程.网络编程.反射.设计模式 最后希望我们能一 ...
- 【软件工具篇01】如何用思维导图构建自己的知识体系
如何用思维导图构建自己的知识体系 思维导图是什么 百度百科上说 思维导图,英文是The Mind Map,又叫心智导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具 ...
- 聊聊图数据库和图数据库的小知识
图数据库 - 维基百科:在计算机科学中,图数据库(英语:graph database,GDB)是一个使用图结构进行语义查询的数据库,它使用节点.边和属性来表示和存储数据.该系统的关键概念是图,它直接将 ...
- Dubbo思维导图知识点整理
Dubbo思维导图知识点整理 下载地址:https://download.csdn.net/download/liuhenghui5201/12846897
最新文章
- 线程池之FixedThreadPool学习
- BUUCTF-Reverse:helloword + findit(安卓逆向)
- Mac OS X下安装和配置Maven
- Scala的控制结构
- springboot项目整合mybatis
- 【转】赶集网mysql开发36军规
- 由于BOM头导致的Json解析出错
- caffe手写数字识别-训练模型
- linux安装通用plsql数据库,linux centOs中安裝好數據庫,客戶端用plsql連接oracle
- 前端+后端实现导入功能
- java开发软件怎么安装不了_java开发软件的安装
- NLP入门学习(一):搜狗新闻语料库的获取与预处理
- 解决cydia bigboss源空白
- 手机端微信发朋友圈功能测试点总结
- Java毕设项目大学生校园兼职系统计算机(附源码+系统+数据库+LW)
- 用BitmapShader实现圆形图片
- android jetpack ViewModel 报错解决方法
- html5学生成绩表,学生成绩表
- mysql印象最深的事情_印象最深刻的一件事500字
- 途牛养车省养车平台源码买卖新车租车维修装潢共享O2O程序源码
热门文章
- 关于人际关系的一些问答
- 【读书笔记】《云计算关键领域安全指南V4.0》(一)
- 各类ETF跟踪指数的数据统计分析
- 两层全连接网络反向传播梯度推导(矩阵形式、sigmoid、最小均方差MSE)
- 网易容器云平台的微服务化实践(一)
- Spring报错 Caused by: org.springframework.beans.factory.BeanNotOfRequiredTypeException
- Spring配置文件报错 :通配符的匹配很全面, 但无法找到元素 ‘context:property-placeholder‘ 的声明
- 新浪财经50ETF期权和上交所300ETF期权行情接口
- html中显示页面布局,如何让打开的网页显示在一个页面上
- 论文阅读------Stochastic Gradient Descent with Differentially Private updates