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

CSS3科学知识汇整观念填空请见该文顶部

这三天归纳了呵呵CSS3中的基本上习题，没努力做到很全面性，即使以后也申诫许多讲义，就没再重新整理成文件格式。这儿就要把以后的讲义照相诸杨，基本上都是许多很零散的小习题，需要我们平常多敲标识符，多翻阅讲义，以增进梦境，进而对CSS娴熟借助。

后面也重新整理两篇有关CSS3104个习题汇整和55 个提升CSS 合作开发工作效率的必不可少短片，有兴趣的爸爸妈妈能看一看：

《有关后端CSS读法104个习题汇整（一）》

《有关后端CSS读法104个习题汇整（二）》

《亲自动手教你55 个提升CSS 合作开发工作效率的必不可少短片》

《亲自动手教你借助CSS掌控文件格式外溢阻断略去软件系统选集》

步入自问自答

CSS3 组件包括：

示例框数学模型大背景和后面板文件格式效用2D/3D 切换动画电影卡代纳产业布局界面

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”

normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded

font-style：定义字体的样式

ormalitalicoblique

font-weight：定义字体的粗细

normalbold

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 度。

scale() 方法

transform: scale(2,4); 把宽度切换为原始尺寸的 2 倍，把高度切换为原始高度的 4 倍。

scaleX(n)：定义 2D 缩放切换，改变元素的宽度。

scaleY(n)：定义 2D 缩放切换，改变元素的高度。

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 轴。

3D 切换

transform-origin ：改变被切换元素的位置。

perspective ：设置元素被查看位置的视图

CSS3 过渡

当鼠标指针悬浮于 <div> 元素上时： 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 之间的数值。