![a6189301f9462b4c9014222ccd537e02.png](https://i-blog.csdnimg.cn/blog_migrate/4a2c51903d241b3373e9c7c3d068dd99.jpeg)
CSS3知识汇总思维导图请见文章底部
这两天总结了一下CSS3中的基本知识点,没有做到很全面,因为之前也记过一些笔记,就没有再整理成文档。这里我会把之前的笔记拍照贴出来,基本都是一些很零碎的小知识点,需要大家平时多敲代码,多翻看笔记,以加深记忆,从而对CSS熟练运用。
前面也整理几篇关于CSS3104个知识点汇总和55 个提高CSS 开发效率的必备片段,有兴趣的小伙伴可以看看:
《关于前端CSS写法104个知识点汇总(一)》
《关于前端CSS写法104个知识点汇总(二)》
《手把手教你55 个提高CSS 开发效率的必备片段》
《手把手教你利用CSS控制文本溢出截断省略解决方案合集》
进入正题
CSS3 模块包括:
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
![5422e4e36900b1289d06f4e3a294c983.png](https://i-blog.csdnimg.cn/blog_migrate/651b55265d8ceb1173bdf7bdfc9293e8.jpeg)
CSS3 边框
CSS3 圆角边框:border-radius:25px;
CSS3 边框阴影:
div{width:300px;height:100px;background-color:#ff9900;-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */box-shadow: 10px 10px 5px #888888;}
CSS3 边框图片: border-image
CSS3 背景
background-size 属性:
第一个值设置宽度,第二个值设置高度。
如果只设置一个值,则第二个值会被设置为 "auto"
background-clip: 属性规定背景的绘制区域。
border-box:背景被裁剪到边框盒。
padding-box:背景被裁剪到内边距框。
content-box:背景被裁剪到内容框。
CSS3 文本效果
CSS3 文本阴影
text-shadow:水平阴影的位置 垂直阴影的位置 可选模糊的距离 可选阴影的颜色
h1{text-shadow: 5px 5px 5px #FF0000;}
word-wrap:break-word 在长单词或 URL 地址内部进行换行
CSS3 字体
font-family:name
font-stretch:可选。定义如何拉伸字体。默认是 "normal"
- normal
- condensed
- ultra-condensed
- extra-condensed
- semi-condensed
- expanded
- semi-expanded
- extra-expanded
- ultra-expanded
font-style:定义字体的样式
- ormal
- italic
- oblique
font-weight:定义字体的粗细
- normal
- bold
CSS3 2D 转换
translate() 方法
translate(x,y):定义 2D 转换,沿着 X 和 Y 轴移动元素。
translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
translateX(n) :定义 2D 转换,沿着 X 轴移动元素。
translateY(n) :定义 2D 转换,沿着 Y 轴移动元素。
rotate() 方法
transform: rotate(30deg); 值 rotate(30deg) 把元素顺时针旋转 30 度。
![ede9374630f9b0ea5080b418662a4364.png](https://i-blog.csdnimg.cn/blog_migrate/549672c5a2f3d746df484dd97ef30694.jpeg)
scale() 方法
transform: scale(2,4); 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。
scaleX(n):定义 2D 缩放转换,改变元素的宽度。
scaleY(n):定义 2D 缩放转换,改变元素的高度。
![75025f7e7f096b01f6a9c2cfa07deceb.png](https://i-blog.csdnimg.cn/blog_migrate/4d810b818e79260a6a113efe13120cf2.jpeg)
skew() 方法
通过 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 轴。
![b9bf9391094cf8caae5d8f99b1ed3d37.png](https://i-blog.csdnimg.cn/blog_migrate/99806ed2adc7e201dccd881ba210835f.jpeg)
3D 转换
transform-origin : 改变被转换元素的位置。
perspective : 设置元素被查看位置的视图
CSS3 过渡
当鼠标指针悬浮于
元素上时:div:hover{width:300px;}向宽度、高度和转换添加过渡效果:div{transition: width 2s, height 2s, transform 2s;}让过渡效果持续 5 秒div{transition-duration: 5s;}
transition-timing-function 属性规定过渡效果的速度曲线。
linear 相同速度ease 慢速开始,然后变快,然后慢速结束ease-in 以慢速开始的过渡效果ease-out 以慢速结束的过渡效果ease-in-out 以慢速开始和结束的过渡效果cubic-bezier(n,n,n,n); 可能的值是 0 至 1 之间的数值。
CSS3 动画
@keyframes :规定动画。
animation: name duration(时间) timing-function delay iteration-count(infinite) direction(是否应该轮流反向播放动画。alternate:动画应该轮流反向播放。);
xmind知识导图
![9031c7613e72e543b784aabaa4837d7f.png](https://i-blog.csdnimg.cn/blog_migrate/ac0fb9524de2a4545d68aeb4e0ba9a5d.jpeg)
总结
若有感兴趣的小伙伴,需要CSS3思维导图原图的,关注我,私信回复获取:CSS3思维导图
推荐文章
《关于前端CSS写法104个知识点汇总(一)》
《关于前端CSS写法104个知识点汇总(二)》
《手把手教你55 个提高CSS 开发效率的必备片段》
《手把手教你利用CSS控制文本溢出截断省略解决方案合集》