第一章 CSS3简介
CSS3是CSS最新的版本，它完全支持向下兼容，因为开发人员不必改变已有项目的样式。CSS3是由W3C开发，通常与HTML5结合进行移动互联网产品的研发。目前现代浏览器均已支持CSS3新语法。
第二章 选择器
第三章 边框
通过CSS3，您能够创建圆角边框、向矩形添加阴影以及使用图片来绘制边框，实现这些效果并不需要使用如PhotoShop的设计软件。
3.1 圆角边框
使用border-radius属性可以为块及元素的四个角添加圆角效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<style>
.demo {
background-color: orangered;
padding: 10px;
width: 200px;
}
.radius {
border-radius: 15px;
}
</style>
</head>
<body>
<div class="demo radius">
<span>CSS3圆角效果</span>
</div>
</body>
</html>
border-radius属性是一个简写属性，用于设置四个 border-*-radius 属性。
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
3.2 边框阴影
在CSS3中，box-shadow用于向方框添加阴影。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<style>
.demo {
background-color: orangered;
padding: 10px;
width: 200px;
}
.radius {
border-radius: 2em;
}
.show{
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div class="demo radius show">
<span>CSS3圆角效果</span>
</div>
</body>
</html>
语法
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
| inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
3.3 边框图片
通过CSS3的border-image属性，您可以使用图片来创建边框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<style>
.demo {
padding: 10px;
width: 200px;
}
.border-image{
border-image: url(css/img/border.png) 30 30 round;
-moz-border-image:url(css/img/border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(css/img/border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(css/img/border.png) 30 30 round; /* Opera */
}
</style>
</head>
<body>
<div class="demo border-image">
<span>图片铺满整个边框</span>
</div>
</body>
</html>
border-image 属性是一个简写属性，用于设置以下属性：
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
|值 | 描述 |
|: ------|:----|
|border-image-source | 用在边框的图片的路径。|
|border-image-slice | 图片边框向内偏移。|
|border-image-width | 图片边框的宽度。|
|border-image-outset | 边框图像区域超出边框的量。|
|border-image-repeat | 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)。|
第四章 文本效果
4.1 文本溢出处理
使用text-overflow属性规定当文本溢出包含元素时发生的事情。
| 值 | 描述 |
|---|---|
| clip | 修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<style>
div.text1 {
border: 1px solid red;
margin: 10px;
padding: 10px;
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.text2 {
border: 1px solid blue;
margin: 10px;
padding: 10px;
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
</style>
</head>
<body>
<div class="text1">
<span>一二三四五六七八九十一二三四五六七八九十</span>
</div>
<div class="text2">
<span>一二三四五六七八九十一二三四五六七八九十</span>
</div>
</body>
</html>
4.2 文本添加阴影
使用text-shadow属性可以向文本设置阴影。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<style>
header h1{
text-shadow: 5px 5px 5px gray;
}
</style>
</head>
<body>
<article>
<header>
<h1>看完这些神奇功能，你可能会爱上win10！</h1>
</header>
<p>
文章内容文章内容文章内容文章内容
</p>
</article>
</body>
</html>
语法
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
4.3 长单词分隔规则
使用word-wrap属性允许长单词换行到下一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<style>
div.text{
border: 1px solid red;
width: 30rem;
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="text">
<p>
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
</p>
</div>
</body>
</html>
第五章 2D转换
使用transform属性能够对元素进行移动、缩放、转动、拉长或拉伸。
5.1 translate()
通过CSS3中的transform属性中的translate()方法，根据给定的left(x坐标)和top(y坐标)位置参数，使元素从其当前位置移动。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<style>
.content{
border: 1px solid red;
background-color: yellow;
margin-top: 10px;
width: 200px;
height: 100px;
}
.translate{
transform: translate(50px 100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-moz-transform:translate(50px,100px); /* Firefox */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
-o-transform:translate(50px,100px); /* Opera */
}
</style>
</head>
<body>
<button type="button" class="btn btn-info" id="btnTransform">2D转换</button>
<div class="content">测试2D转换的div</div>
</body>
<script>
jQuery(function($){
$("#btnTransform").click(function(){
$("div.content").addClass("translate");
});
});
</script>
</html>
5.2 rotate()
通过rotate()方法，元素顺时针旋转给定的角度（deg）。允许负值，元素将逆时针旋转。
.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 */
}
5.3 scale()
通过scale()方法，根据给定的宽度（X轴）和高度（Y轴）参数，元素的尺寸会增加或减少。
.scale{
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倍。
5.4 skew()
通过skew()方法，根据给定的水平线（X轴）和垂直线（Y轴）参数将元素翻转给定的角度。
.skew{
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-moz-transform:skew(30deg,20deg); /* Firefox */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
-o-transform:skew(30deg,20deg); /* Opera */
}
值skew(30deg,20deg)围绕X轴把元素翻转30度，围绕Y轴翻转20度。
第六章 3D转换
CSS3允许您使用transform属性中的rotateX()和rotateY()方法对元素进行3D转换。
6.1 rotateX()
通过rotateX()方法，元素围绕其X轴以给定的度数进行旋转。
.rotateX{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
6.2 rotateY()
通过rotateY()方法，元素围绕其Y轴以给定的度数进行旋转。
.rotateY{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
第七章 过度
通过CSS3的transition属性，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：
- 规定您希望把效果添加到哪个CSS属性上
- 规定效果的时长
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<style>
.content{
background-color: yellow;
margin: 10px;
width: 100px;
height: 100px;
transition: width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div.content:hover{
width: 300px;
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
注释：当指针移出元素时，它会逐渐变回原来的样式。
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3样式</title>
<style>
.content{
background-color: yellow;
margin: 10px;
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div.content:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
