CSS3 简介（一）

Love The Way You Lie 2021-09-14 09:56 319阅读 0赞

**1：对CSS3已完全向后兼容，所以你就不必改变现有的设计。浏览器将永远支持CSS2。**  
**2：CSS3 模块**  
（1）选择器  
（2）盒模型  
（3）背景和边框  
（4）文字特效  
（5）2D/3D转换  
（6）动画  
（7）多列布局  
（8）用户界面

**css3 新增的属性**  
border-image 设置所有边框图像的速记属性。 3  
border-radius 一个用于设置所有四个边框- \*-半径属性的速记属性 3  
box-shadow 附加一个或多个下拉框的阴影

**CSS3 背景**  
（1）background-image  
（2）background-size  
（3）background-origin  
（4）background-clip

**CSS3 渐变（Gradients）**  
（1）线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向  
（2）径向渐变（Radial Gradients）- 由它们的中心定义

实例
    从上到下的线性渐变：
    #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法 */ }

**CSS3 文本效果**  
text-shadow  
box-shadow  
text-overflow  
word-wrap  
word-break

{ text-shadow: 5px 5px 5px #FF0000; }

**CSS3 2D 转换**  
2D 转换  
在本章您将了解2D变换方法：  
translate()  
rotate()  
scale()  
skew()  
matrix()

div
    { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }

div
    { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ }

div
    { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }

-ms-transform:scale(2,3); /* IE 9 */
    -webkit-transform: scale(2,3); /* Safari */
    transform: scale(2,3); /* 标准语法 */

**CSS3 3D 转换**  
CSS3 允许您使用 3D 转换来对元素进行格式化。  
在本章中，您将学到其中的一些 3D 转换方法：  
（1）rotateX()  
（2）rotateY()

div
    { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */ }

div
    { transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */ }

**CSS3 过渡**  
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：

div
    { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Safari */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; }

简写：

div
    { transition: width 1s linear 2s; /* Safari */ -webkit-transition:width 1s linear 2s; }