CSS入门总结（下）

记得昨天的文章学到了什么吗，让我来帮大家回忆一下吧～经过昨天的学习，我们学会了如何创建CSS，学习了选择器的使用以及选择器的权重并且学习了怎样为选择器添加属性声明，学习了什么是盒子模型，学习了如何定位元素、如何为元素设置宽高、设置背景色、设置填充边距和边框、如何设置字的字体、字号、颜色、对齐方式等。OK，回忆到此为止，其实现在大家就已经可以很好的做一个静态页面了，但是呢，虽然CSS能够用于控制网页的样式和布局，而CSS3才是最新的CSS标准，而且HTML5+CSS3的王道组合往往能够达到事半功倍的效果，所以大家还是要多了解一下～～

那么作为新标准的CSS3又有些什么不一样呢，让我们走近CSS3的大门，领略它的风采吧～

CSS3对CSS做了更有条理的划分，并增加了一下新的模块。主要分为以下模块：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。下面把CSS做一个梳理并主要介绍一下发生变化的模块内容：

1. 选择器： CSS3对选择器做了更详细的划分：

1. 背景和边框 1) 通过传统CSS创建一个带圆角的边框是很麻烦的。我们需要通过设置一个背景图或在不同的角设置不同的图像等方式达到效果，在CSS3中直接使用border-radius即可。border-radius: 5px; 2）box-shadow：用来添加阴影。box-shadow: 10px 10px 10px #888; 3）border-image：我们可以设置不是纯色的边框啦，可以加进去带图片的边框，因为浏览器内核的不同，为保证兼容，要考虑不同浏览器的情况。 border-image:url(mengtu.png) 30 30 round; -webkit-border-image:url(mengtu.png) 30 30 round; /* Safari 5 and older */ -o-border-image:url(mengtu.png) 30 30 round; /* Opera */ 4）背景： background-image：background-image: url(mengtu.gif); background-size指定背景图像的大小：background-size:80px 60px; background-repeat指定图片是否重复：background-repeat:no-repeat; background-origin指定背景图像的作用范围：background-origin:content-box; background-clip背景剪裁属性是从指定位置开始绘制：background-clip: content-box; 5）渐变： 垂直线性渐变：

对于非垂直线性渐变：background: linear-gradient(180deg, red, blue); 第一个参数可以设置位置信息 径向渐变

1. 文字特效 1）text-shadow文字阴影：text-shadow: 5px 5px 5px #FF0000; 2）box-shadow盒子阴影：box-shadow: 10px 10px 5px #888888; 3）text-overflow文字溢出显示效果：text-overflow: clip; 4）word-wrap是否换行：word-wrap:break-word; 5）word-break单词拆分换行：word-break: keep-all; 6）@font-face将字体文件包含在网站中即可

1. 2D/3D转换 2D转换 1）translate()这里的两个坐标指的是X及Y轴位置，进行移动： div{ transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ } 2）rotate()按照指定的度数顺时针旋转： div{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } 3）scale()根据X及Y轴的参数，分别设置增大或减小多少： div{ -ms-transform: scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* 标准语法 */ } 4）skew()设置X、Y轴倾斜角度： div{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */ } 5）matrix()包含旋转，缩放，移动（平移）和倾斜功能。： div{ transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ } 3D： 1）rotateX()：围绕其在一个给定度数X轴旋转的元素。 div{ transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */ } 2）rotateY()：围绕其在一个给定度数Y轴旋转的元素。 div{ transform: rotateY(130deg); -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */ }
2. 多列布局 1）column-count创建列数：column-count: 3; 2）column-gap列之间间隔宽度：column-gap: 40px; 3）column-rule-style列与列之间边框样式：column-rule-style: solid; 4）column-rule-width列的边框宽度：column-rule-width: 1px; 5）column-rule-color边框颜色：column-rule-color: lightblue; 6）column-rule前几个属性的组合：column-rule: 1px solid lightblue; 7）column-span跨越多少列：column-span: all; 8）column-width指定列的宽度：column-width: 100px;
3. 用户界面：用来调整元素尺寸，框尺寸和外边框。 1）resize：指定元素是否能够由用户调节尺寸。 2）box-sizing：允许以确切的方式定义适应某个区域的具体内容。 3）outline-offset：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

关于动画方面，后面会出一个动画专题来讲哟，不要着急～～而且兔妞后续也会为大家整理一份兔妞自己学习CSS的学习脑图，敬请期待呢～

好啦，今天的内容到这里就结束啦，信息量可能有点大，那么收获是不是也非常大呢，可以慢慢消化滴！喜欢兔妞的文章请点击好看让更多人看到哦～么么哒！！！