3/20/2017 2:17:41 PM
CSS3边框
border-radius
定义圆角的形状。上右下左原则。
border-image
使用图片创建边框。
box-shadow
向方框添加阴影。
语法：box-shadow: h-shadow（必需 水平阴影） v-shadow（必需 垂直阴影） blur（模糊距离） spread（阴影尺寸） color（阴影颜色） inset（将外部阴影改为内部阴影）;
说明：可实现类似照片叠加拼图的效果。
CSS3背景
background-size
可以以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
上面是缩小的背景图片。
原始图片：
上面代码效果如下：
其中body{padding-top:80px;}指的是body元素相对于自身，有一个80px的上内边距，即第一行文本元素距离页面顶部有一个80px的距离，这个值与背景图片无关。
将padding-top值设置为40px，结果如下：
background-origin
规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
background-origin:border-box:
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
background-origin:content-box:
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
background-origin:padding-box:
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
background-clip
规定背景的绘制区域。
和background-origin一样，值也为"border-box(默认)/content-box/padding-box"
这是文本。这是文本。这是文本。
若没有规定background-clip:content-box;则黄色背景会从边框开始填满。
CSS3文本效果
text-shadow
给文本添加阴影。
语法：text-shadow: h-shadow（必需 水平阴影） v-shadow（必需 垂直阴影） blur（模糊距离） color（阴影颜色）;
word-wrap
允许文本在元素内强制换行。（即解决前面经常遇到的问题：写一行很长的sssssssss但不加空格，就会认为这是一整个单词而不进行拆分，表现出来的效果有问题）
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
去掉
word-wrap:break-word;表现如下：
CSS3字体
通过@font-face规则定义任意喜欢的字体。
With CSS3, websites can finally use fonts other than the pre-selected "web-safe" fonts.
注释：Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
如上，在新的@font-face规则中，必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件，通过font-family属性来引用字体的名称(myFirstFont)。
而当font-family的文本需要显示为粗体，也就是当使用了b标签时，需要另外添加一个包含该字体粗体的字体文件，为相同的字体设置许多@font-face规则来达到我们的目的。
当去掉上述代码中的第二段@font-face后，显示效果如下：
语法规则示例：
CSS 2D转换
属性：transform
值：
- translate()定义偏移量left和top
你好。这是一个 div 元素。
你好。这是一个 div 元素。
你好。这是一个 div 元素。
效果如下：
元素会 以自身中心点为原点（即原本所在的位置的中心点）偏移一定的长度，
transform:translate(50px,100px);表示在中心点左边添加50px，在中心点上方添加100px。
也可用比例来表示，
transform:translate(-50%,-50%);表示以中心点为原点，向X轴左边添加自身宽度的-50%，向Y轴上方添加自身高度的-50%。
- rotate()定义旋转角度
Hello World
元素会以自身中心点为原点旋转一定角度，角度值为正即顺时针旋转，负值为逆时针。
- scale()定义元素尺寸在X轴和Y轴上的成比例缩放。
你好。这是一个 div 元素。
你好。这是一个 div 元素。
如果没有设定div#div2，那么两个div元素应该是上下紧凑排列的，但上面代码的效果是：
div2相对于它原本应该在的地方，添加了100px的margin，即位置移到了第一个div的右下角并不与之相交，然后以自身中心点为原点，宽度变为原来的2倍，高度变为原来的4倍。
- skew()定义水平X及垂直Y翻转拉伸。
你好。这是一个 div 元素。
你好。这是一个 div 元素。
值skew(30deg,20deg)围绕X轴把元素翻转30度，围绕Y 轴翻转20度。
- matrix()将所有的2D转换方法组合，需要6个参数，矩阵为3*3，包括函数，允许旋转、缩放、移动及倾斜元素，注意：translate, rotate等方法都是需要单位的，而matrix方法e,f参数的单位可以省略。
transform:matrix详细介绍
以下线性代数知识：
设原始基点H坐标为(x,y)，transform:matrix(a,b,c,d,e,f)
- 用于偏移translate时，变换后基点H'(x'=ax+cy+e,y'=bx+dy+f)，在不设置transform-origin属性时默认矩阵基点为(0,0),这时候得到的变换后基点坐标为H'(e,f)；
- 用于缩放scale时，参数a和d分别表示X轴和Y轴缩放比例，那么对于matrix(a,0,0,d,0,0)即缩放后H'(x'=ax+cy+e=ax,y'=bx+dy+f=dy)
- 当matrix应用于旋转rotate时，假设角度为θ，那么
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)，结合矩阵公式，变化后的坐标为x'=xcosθ-ysinθ+0=xcosθ-ysinθ
y'=xsinθ+ycosθ+0=xsinθ+ycosθ
例子：
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
上面代码表示将元素旋转30°
- 用于拉伸skew()时，只与b,c相关，对于matrix(1,tan(θy),tan(θx),1,0,0)，套用公式得到x'=x+ytan(θx)+0=x+ytan(θx)y'=xtan(θy)+y+0=xtan(θy)+y，即2D动作之后得到的基点坐标为H'[x+ytan(θx),y+xtan(θy)]
那么，举个例子，设matrix(2,3,4,5,6,7):
当基点坐标为(x,y)时，矩阵之后得到的基点坐标为H'(2x+4y+6,3x+5y+7),元素宽度为原来的2倍，高度为原来的5倍，还存在拉伸和旋转角度。当然，一般不会存在这么奇怪的6个参数。 - 用matrix实现镜像效果：
镜像对称轴永远经过原点(0,0),那么对称轴可以用y=kx表示，已知点(x,y),求其对称点(x',y')坐标。
计算步骤如下：
(y-y') / (x - x') = -1/ k
(x + x') / 2 * k = (y + y')/2
得到：
ky-ky' = -x+x'
kx+kx' = y+y'
提出x' y':
x' = (1-k k)/(kk+1) x + 2k/(kk+1) y;
y' = 2k/(kk+1) x + (kk-1)/(k k+1) y;
结合矩阵公式：
x' = ax+cy+e;
y' = bx+dy+f;
可以得到：
a = (1-kk)/(kk+1);
b = 2k/(k k+1);
c = 2k/(kk+1);
d = (k k-1)/(kk+1);
3/21/2017 2:36:16 PM
transform-origin属性
允许您改变被转换元素的基点位置。
2D转换元素能够改变元素x和y轴。3D 转换元素还能改变其Z轴。