在网站设计中，有时候会遇到对一张图片做多处使用，而每处显示的尺寸又不一定都一样，在传统作法中，需要根据不同尺寸
设计不同的图片。不过利用css，能够很好解决这个问题。
一、直接设置图片的width，height，或者直接改变图片的长宽比例
虽然简单方便，但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算，实际显示虽然简单方便，但是会引起图像显示效果问题。因为浏览器不能像ps那样对图像以相对尺寸进行缩放运算，实际显示时图像会出现像素位移的状况。
二、使用clip剪切
CSS对许多对象提供专门用于对象剪切的样式属性——clip，可用clip属性来处理对象最终的显示内容。
clip 设置对象的可视区域。只对绝对定位的对象有效，应用此属性时，对象必须使用position：absolute
可用值：auto， rect（number，number，number，number）
使用clip属性进行对象剪切时，必须给的4个数值。使用方法如下
clip：rect（number1，number2，number3，number4）；
number1~number4分别代表上、右、下、左4个边，相对与左上角坐标（0,0）的偏移值。
（这点与margin四个数值代表边的顺序相同，不同的margin的四个值都是相对于自身内容的四边的偏移）
三、使用div强制剪切
使用overflow：hidden；的对象将强制不显示对象中超过对象范围的部分内容
SVGs 能够很好的在 web 上工作, 剪切和遮罩允许你使用有趣的方式去展示或隐藏 web 图像， 使用这些技术也能让的设计变得更加灵活因为你不需要去修改或者创建新的图像——这些都可以用代码来实现。通过结合使用 CSS 和遮罩技术，你将会拥有更多的可能性去使用网络图像。需要明确的是，遮罩和剪切是通过 CSS 来处理图像的两种不同的方法，让我们从剪切开始吧！
剪切基础
如果你曾经使用过 Photoshop , 你大概已经很熟悉剪切遮罩了。 他们有一些共同点，剪切通过放置矢量图形来使用,比如圆和三角形, 在图像和元素的上面矢量图形外面的任何部分都会显示，所有矢量图形边界的外面都将被隐藏。
举个例子，如果一个三角形的剪切遮罩覆盖上树林图像上的话, 你可以看到三角形里面的森林图像。图形的边界被称做剪切路径, 不要和已经废弃掉的 clip 属性混淆，你可以使用 clip-path 去创建一个剪切路径。
遮罩基础
在网页上，遮罩是使用 PNG 图片、CSS 渐变、或一个 SVG 元素来隐藏图片或其它元素的部分。我们将集中注意力在 SVG 图像上，不过请注意遮罩可以使用其他类型的图片或者样式的。
遮罩属性和遮罩元素
仅仅是为了帮助理解, 请记住被遮罩的元素是“原始”（还没有应用遮罩的）图片， 你可能不想看到全部的图片,所以使用 CSS mask 属性来完成隐藏部分图片的工作。 mask 是 CSS 一组独立属性的简写 , 我们将接下来会介绍它。SVG 元素被用来给 SVG 内部的图像添加遮罩效果。在接下来的示例中, 遮罩是添加了渐变效果的圆形。
在 SVG 图像上应用 SVG 遮罩元素
为了使用 SVG mask 得到一种感觉，我们将在 SVG 图像上使用遮罩。
这给人的第一印象可能会比较复杂, 但是它可以很好遮罩下面的图像。我们有一张真实的图片作为背景，那么 SVG 在哪里起作用呢？和剪切不同, 这张背景图片技术上来说是在 SVG 元素内部的。我们将使用 CSS 来给图片应用遮罩，属性将来自于 SVG 遮罩元素，在我们的 CSS 中指定一个 mask-element id。
CSS3中使用transform属性可实现元素曲线运动。
下面介绍下transform 属性定义及其实例。
定义和用法：
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.transform="rotate(7deg)"
语法transform: none|transform-functions
值 描述none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
浏览器支持：
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
实例：
实例A：旋转 div 元素：
div
{
transform:rotate(7deg)
-ms-transform:rotate(7deg) /* IE 9 */
-moz-transform:rotate(7deg) /* Firefox */
-webkit-transform:rotate(7deg) /* Safari 和 Chrome */
-o-transform:rotate(7deg) /* Opera */
}
CSS3 转换。
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
实例
div
{
transform: translate(50px,100px)
-ms-transform: translate(50px,100px) /* IE 9 */
-webkit-transform: translate(50px,100px) /* Safari and Chrome */
-o-transform: translate(50px,100px) /* Opera */
-moz-transform: translate(50px,100px) /* Firefox */
}
注：Internet Explorer 9 需要前缀 -ms-。
![javascript 怎么取多维数组的长度? 这样的：var xx = [{, },{, }];](/aiimages/javascript+%E6%80%8E%E4%B9%88%E5%8F%96%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84%E7%9A%84%E9%95%BF%E5%BA%A6%3F+%E8%BF%99%E6%A0%B7%E7%9A%84%EF%BC%9Avar+xx+%3D+%5B%7B%2C+%7D%2C%7B%2C+%7D%5D%3B.png)
