css3简介

一、css3简介

CSS 用于控制网页的样式和布局,CSS3 是最新的CSS标准,CSS3 完全向后兼容，因此您不必改变现有的设计。浏览器通常支持 CSS2,但是现在大部分浏览器也实现了css3的很多特性。
CSS3 被划分为模块。其中最重要的 CSS3 模块包括：

1. 选择器
2. 框模型
3. 背景和边框
4. 文本效果
5. 2D/3D 转换
6. 动画
7. 多列布局
8. 用户界面

二、css3边框

2.1 边框圆角
Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。
Firefox、Chrome 以及 Safari 支持所有新的边框属性。
border-radius(边框圆角)语法如下：
border-radius:10px;代表四个方向都有一个微微的圆角
border-radius:50%;代表是正圆
2.2 边框阴影
box-shadow（边框阴影）语法如下：

div{
    box-shadow: 10px 10px 5px #888888;
}

第一个值代表阴影的水平偏移量，第二个值代表阴影的垂直偏移量，第三个值代表阴影的模糊度，第四个值代表阴影的颜色

三、css3背景

3.1背景图大小
background-size（背景图大小）
background-size:100px 100px; 可以给具体的数值
background-size:50% 50%; 可以给百分百 相对于父元素来说
background-size:cover; 会拉伸图片，填满div
background-size:contain; 拉伸图片的时候一个方向填满了，另一个方向停止了
3.2背景图起始点
background-origin这个属性可以设置背景图到底是以content、padding还是border为起点来放置背景图
而且css3还允许一个div放置多张背景图

四、css3文本效果

4.1 文本阴影
text-shadow是规定文本阴影的，第一个值是阴影的水平偏移量，第二个值是阴影的垂直偏移量，第三个值是模糊度，第四个值是阴影的颜色。

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

4.2 文本换行
CSS3 自动换行
允许对长单词进行拆分，并换行到下一行：
p {word-wrap:break-word;}

五、css3 3D转换

rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

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

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素

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