css3

标签：

圆角边框

border-radius

边框阴影

box-shadow: 10px 10px 5px #888888;

图片边框  ie不支持  不推荐使用

图片平铺

-moz-border-image:url(/i/border.png) 30 30 round;    /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round;        /* Opera */
border-image:url(/i/border.png) 30 30 round;

图片拉伸

-moz-border-image:url(/i/border.png) 30 30 stretch;    /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch;    /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch;    /* Opera */
border-image:url(/i/border.png) 30 30 stretch;

背景图尺寸

background-size

在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。

能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。

背景图定位

background-origin

背景图片可以放置于 content-box、padding-box 或 border-box 区域。

ps：背景图可以使用多个，以“，”隔开

规定背景的绘制区域

background-clip

文本阴影

text-shadow  同上面的边框阴影

文字自动换行

word-wrap:break-word;

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style> 
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘),
     url(‘Sansation_Light.eot‘); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

View Code

字体描述符

font-weight  可选。定义字体的粗细。默认是 "normal"。

2D转换

元素旋转

通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */

值 rotate(30deg) 把元素顺时针旋转 30 度。

通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：

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 */

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

3D转换

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。

transform: rotateX(120deg);
-webkit-transform: rotateX(120deg);    /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);    /* Firefox */

通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。

transform: rotateY(130deg);
-webkit-transform: rotateY(130deg);    /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);    /* Firefox */

css3

标签：

原文地址：http://www.cnblogs.com/bilibiliganbei/p/5905699.html