css3教程..docVIP

CSS3规范语言 1、创建圆角border-radius。 2、向 div 元素添加方框阴影：box-shadow: 10px 15px 5px #888888;（10px代表阴影往左交错10像素，15px代表阴影往下15像素，5px代表阴影羽化5像素 #888888是阴影颜色）、 3、使用图片创建围绕 div 元素的边框border-image:url(border.png) 30 30 round;（平铺） border-image:url(border.png) 30 30 stretch;（拉伸） 4、CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。 您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。background:url(img.jpg); background-size:50px 100px;（调整背景图片的大小） background-repeat:no-repeat; background-size:40% 100%;（对背景图片进行拉伸） 5、background-origin 属性规定背景图片的定位区域”content” div id=”content-img” div id=”content-box”/div /div /div Div{ background:url(img.jpg); background-origin:content-box;(背景图片定位于content-box层) } 6、CSS3 允许您为元素使用多个背景图像。background-image:url(bg_flower.gif),url(bg_flower_2.gif); 7、在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow: 5px 5px 5px #FF0000;( 水平阴影、垂直阴影、模糊距离，以及阴影的颜色word-wrap:break-word; 9、在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。 通过 CSS3，web 设计师可以使用他们喜欢的任意字体。 当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。 您“自己的”的字体是在 CSS3 @font-face 规则中定义的。 在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。 如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：@font-face { font-family: myFirstFont; src: url(Sansation_Light.ttf), url(Sansation_Light.eot); /* IE9+ */ 使用粗体字体 您必须为粗体文本添加另一个包含描述符的 @font-face：@font-face { font-family: myFirstFont; src: url(Sansation_Bold.ttf), url(Sansation_Bold.eot); /* IE9+ */ font-weight:bold; } } 10、CSS3 2D 转换 通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。div { 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 */ } 通过 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); /*