【CSS3教程】CSS3基础&常用技巧&实例集合
CSS3常用技巧
CSS3下条纹&方格斜纹背景的实现
一、效果抢先：CSS3下的条纹背景demo
这些美丽的纹饰全部都是由CSS实现的，没有一点点的图片。
二、原理简述
主要是应用了两个CSS3的属性，一个是linear-gradient，即线性渐变，另外一个就是background-size，用来确定渐变的尺寸。关于background-size的基础知识，您可以点击这里查看。background-size顾名思意就是背景的尺寸。如果没有background-size的限制，渐变背景就会从上走到下（或从左走到右），100%覆盖。
FireFox/Opera浏览器下的渐变使用参见“CSS渐变之CSS3 gradient在Firefox3.6下的使用”一文，Safari/Chrome浏览器下的渐变使用参见“CSS gradient渐变之webkit核心浏览器下的使用”一文。
渐变这玩意就跟photoshop中的渐变一样，尤其webkit核心浏览器下那个有些难搞的color-stop，就是下面这货了：
FireFox/Opera浏览器下的颜色过渡点直接就是百分比或是像素值，类似于上面的color-stop了。
回到本文实例，为了限制所有渐变图案的大小，我们统一将渐变尺寸限制为50像素，于是就有了demo页面中的这部分CSS代码了：
-webkit-background-size: 50px 50px;-moz-background-size: 50px 50px;background-size: 50px 50px; /* 控制条纹的大小 */
下面说说渐变的事件，那上面最简单的有些土黄的垂直条纹来说吧。其渐变相关的CSS代码如下：
background-color: #f90; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent)); background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
这里的条纹实现的方法是很聪明的，如果按照我们photoshop中制作渐变的习惯，可能相关的CSS代码应该是下面这样子：
background-image: linear-gradient(0deg, #ffad33 0， #ffad33 50%, #f90 50%, #f90 100%);
而这里的实现是直接关心50%中点处，设置一个透明度为20%的白色断点，然后直接映在背景上。不可不谓轻巧简便，重用性高。
最后，讲下最复杂的例子，就是那个黑白斜纹了，其相应的渐变代码如下：
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555)); background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -moz-linear-gradient(45deg, transparent 75%, #555 75%), -moz-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent), -o-linear-gradient(45deg, transparent 75%, #555 75%), -o-linear-gradient(-45deg, transparent 75%, #555 75%); background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent), linear-gradient(-45deg, #555 25%, transparent 25%, transparent), linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
不要看上面的代码好像建楼房一样，架得老高老高。实际上是个糊着老虎年画的窗户纸——一捅就破。其实呢，就是东南，东北，西 南，西北四个方向同时画个黑色的边角（等腰直角三角形），中间透明镂空。因为demo页面背景色是白色，所以，就会使黑白间隔效果，如果使用小bug将 demo页面的背景色换一换，则就像是卸了妆的非主流——模样大变，例如，背景换成和谐的绿色：
三、其他类似实例
在先前的“几种纯CSS(CSS3)下的纸张效果实现展示”一文中的第三部分——“带分隔线的卷纸纸张效果”处的纸张分隔线的实现也使用的类似的原理。
不 过略有不同的是那里FireFox下的实现使用的是repeating-linear-gradient属性，当时如此使用是因为FireFox3.6之 前的版本还不支持background-size属性，不过现在此问题已成往事，所以，直接应用background-size属性也是妥妥的。
您如果有兴趣可以轻轻地点击这里：带分隔线的卷纸纸张效果demo
四、结语
在 CSS2的时候，就那么点属性，我们还可以实现很多很赞的效果。而CSS3有那么多令人欣喜若狂的属性，很显然的，各种CSS3下的相关技术必定雨后春笋 般大量出现，以后的web就是只要想不到，没有做不到的效果。本文的这个条纹效果可以说是最最简单的相关应用了。我们只要稍微再发散下，可以实现很多其他 更精妙的东西。例如，木纹质感的背景，或是金属质感的背景——完全CSS实现！这就看你的创造力有多少了！CSS3的时代即将迈入，很多技术都是空白，这 真是我们前端er的机遇，首创某些新技术的机遇。
参考文章：Checkerboard, striped & other background patterns with CSS3 gradients
CSS3的(网格)Gird布局【CSS3】
从网上看来的，不过做个人站的话，可以尝试一味追求更炫的效果，CS3加html5，几乎是无敌，不过如果想靠这个来混饭吃，照目前国内行情来看，还是挺困难。所以还是乖乖先做好自己的本分再说。
对于这个布局复杂的三栏网页来说，如果使用 CSS3 Gird 布局的话，我们只需这样写：
body { columns:3; column-gap:0.5in; }
img { float:page top right; width:3gr; }
其中，body 部分声明页面为 3 栏，栏间距为 0.5英寸；img 中 float 属性指明图片浮动位置为页面的右上角（CSS3 定位好强大 -__-），而宽度为 3 个栏宽。只需这样两行 CSS，我们就可以实现这个复杂的布局了。真的很神奇。
css3对background的调整与增强
css3对于backgrounds做了一些修改，最明显的一个就是采用设置多背景，不但添加了4个新属性，并且还对目前的属性进行了调整增强。
1、多个背景图片
在css3里面，你可以再一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法，但引用图片之间需用“，”逗号隔开。第一个图片是定位在元素最上面的背景，后面的背景图片依次在它下面显示，如下：
background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
2、新属性：Background Clip
此讨论让我们回到文章开始提到的关于背景被border边框遮挡的问题。background-clip的添加让我们完全能够控制背景显示的位置。属性值如下：
(1)background-clip: border;背景在border边框下开始显示
(2)background-clip: padding;背景在padding下开始显示，而不是border边框下开始
(3)background-clip: content;背景在内容区域下开始显示，而不是border边框下开始或padding下开始。
(4)background-clip: no-clip;默认属性值，类似与background-clip: border;
3、新属性: Background Origin
此属性需要与background-position配合使用。你可以用background-position计算定位是从border，padding或content boxes内容区域算起。（类似background-clip）
(1)background-origin：border;
从border边框位置算起
(2)background-origin：padding;
从padding位置算起
(3)background-origin：content;
从content-box内容区域位置算起；
background-clip和background-origin。
4、新属性：Background Size
Background Size属性用来重设你的背景图片。有几个属性值：
(1)background-size: contain;
缩小背景图片使其适应标签元素（主要是像素方面的比率）
(2)background-size: cover;
让背景图片放大延伸到整个标签元素大小（主要是像素方面的比率）
(3)background-size: 100px 100px;
标明背景图片缩放的尺寸大小
(4)background-size: 50% 100%;
百分比是根据内容标签元素大小，来缩放图片的尺寸大小
5、新属性：Background Break
css3里标签元素能被分在不同区域（如：让内联元素span跨多行），background-break属性能够控制背景在不同区域显示。
属性值：
(1)Background-break: continuous;
此属性是默认值，忽视区域之间的间隔空隙（给它们应用图片就好像把它们看成一个区域一样）
(2)Background-break: bounding-box;
重新考虑区域之间的间隔
(3)Background-break: each-box;
对每一个独立的标签区域进行背景的重新划分。
6、背景颜色的调整
background-color属性在css3版本里面稍微做了增强，除了指定background color背景颜色之外，还可以对不使用的标签元素背景图片进行去色处理。
background-color: green / blue;此例子里，这背景颜色可能是绿色，然而，如果底部背景图片无效的话，蓝色将代替绿色来显示。如果你没有指定某个颜色的话，它将其视为透明。
7、背景重复的调整
css2里当设置背景的时候，它经常被标签元素截取而显示不全，css3介绍了2个新属性来修复此问题。
background-repeat: space；图片以相同的间距平铺且填充整个标签元素
background-repeat: round；图片自动缩放直到适应且填充整个标签元素
8、Background Attachment 的调整
Background Attachment有了一个新属性值:local,当标签元素滚动时它才有效(如设置overflow:scroll;)，当background- attachment设置为scroll时，背景图片是不随内容滚条滚动的。现在，有了background-attachment:local，就可以 做到让背景随元素内容滚动而滚动了。
CSS3边框－边框颜色(border-color)＋边框背景(-border-image)
CSS3边框－边框颜色(border-color)
CSS3提供了新的边框 ，其中，有圆形边框，边框的颜色也是非常有趣。 Mozila / Firefox已经支持该特性，你可以创造很酷的边框。请看一个例子：
在Mozilla浏览器/ Firefox中效果为:显示一灰色的边框
border: 8px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; padding: 5px 5px 5px 15px; /* 效果匀在在Mozilla/ Firefox浏览器中显示的效果.在IE下可不支持哦!!! */
CSS3边框－边框背景(-border-image)
另一个令人兴奋的新特征是边框图片。有了这项功能您可以定义一个图像被用来代替正常的边框的一个组成部分。这项功能实际上是分成了几个属性：边框和边框角的形象。这两个值是：
border-image: url(border.png) 27 27 27 27 round round; 或: border-image: url(border.png) 27 27 27 27 stretch stretch;
边框背景教程：
顾名思义，图形化边界就是允许使用图片作为对象的边界，语法如下:
border: 5px solid #cccccc; -webkit-border-image: url(/images/border-image.png) 5 repeat; -moz-border-image: url(/images/border-image.png) 5 repeat; border-image: url(/images/border-image.png) 5 repeat;
这里，border: 5px 设定了边界的宽度，然后，每个边界的图片定义告诉浏览器，使用图片的多大一部分来充当边界。边界图片还可以针对每一条边单独设置：
border-bottom-rightright-image border-bottom-image border-bottom-left-image border-left-image border-top-left-image border-top-image border-top-rightright-image border-right-image 支持的浏览器： Firefox 3.1, Safari , Chrome.
CSS3－块阴影与文字阴影
-webkit-box-shadow: 10px 10px 25px #ccc;
-moz-box-shadow: 10px 10px 25px #ccc;
box-shadow: 10px 10px 25px #ccc;
前两个属性设置阴影的 X / Y 位移，这里分别是 10px，第3个属性定义阴影的虚化程度，最后一个设置阴影的颜色。文字阴影也可以这样设置：
text-shadow: 2px 2px 5px #ccc;
支持的浏览器：Firefox 3.1, Safari, Chrome (只支持 Box 阴影) ，Opera (只支持文字阴影).前3个数字表示红绿蓝三色的值，最后一个值代表透明度，另外，我们还可以使用 opacity 实现透明度(目前的灯箱效果多使用该技巧 )
CSS3－使用 RGBA 实现透明效果
目前，Web 设计中的透明效果主要靠 PNG 图片实现(但在 IE 浏览器支持得并不好 - 译者)，在 CSS3，可以直接实现透明效果。
background: rgba(200, 54, 54, 0.5); color: rgba(200, 54, 54, 0.5); color: #000; opacity: 0.5;
支持的浏览器： Firefox, Safari, Chrome, Opera (opacity) 以及 IE7 (opacity, with fixes).
CSS3－使用 @Font-Face 实现定制字体
Web 设计中有几种字体是比较安全的，如 Arial,Helvetica, Verdana, Georgia, Comic Sans (中文的，一般来说宋体是唯一安全的 - 译者)，现在，使用 CSS3 的 @font-face 可以自己指定字体，不过因为牵扯到版权问题，实际能用的字体也是有限的 (另外，体积庞大的中文字体也是一个不好解决的问题 - 译者)。
语法如下:
@font-face {
font-family:’Anivers’;
src: url(’/images/Anivers.otf’) format(’opentype’);
}
支持的浏览器： Firefox 3.1, Safari, Opera 10 and IE7 (需要一番周折，如果你不怕麻烦，可以在 IE 实现这个功能，请参考： make font-face work in IE )
虽然 CSS3 尚在开发中，上面提到的这些功能已经可以在部分浏览器中使用了，尤其是 Safari。不幸的是，Safari 并非主流浏览器。
Firefox 目前拥有大量用户基础，另外，即将推出的 Firefox 3.1 支持不少 CSS3 效果，因为 Firefox 用户的升级积极性很高，因此，会有不少用户可以提前体验 CSS3 的新功能。
Google Chrome 今年刚刚发布，它基于 Webkit 引擎，因此和 Safari 很相似，因为 Safari 主要用于 Mac 市场，Chrome 可以正好弥补 Windows 市场的空缺。
CSS3系列教程:多列/多卷
使用CSS3可以为你的网站创建多列，而不用为每列制定特定的层或段落。
与多背景图片一样，CSS3多列也是我最喜爱的一个技术。我想这条CSS3属性有在报纸和杂志布局中以外的很多潜在的用途。如果你在某个想法或个人网站中使用了这种方法，请在下面的评论中提交你的链接，我很高兴能确认这种方法能用于很多中布局中。
跨浏览器兼容性：
比较好的支持CSS3多列的浏览器有Firefox、Safari、Google Chrome，这样我们就需要使用-moz和-webkit前缀了。
CSS3多列(宽度)
#multiColumnWidth{text-align:justify; -moz-column-width:20em; -moz-column-gap:2em; -webkit-column-width:20em; -webkit-column-gap:2em;}
CSS3多列(列数)
#multiColumnCount{text-align:justify; -moz-column-count:3; -moz-column-gap:1.5em; -moz-column-rule:1pxsolid#dedede; -webkit-column-count:3; -webkit-column-gap:1.5em; -webkit-column-rule:1pxsolid#dedede;}
利用CSS3制作动画效果
概述
在CSS3中新增了几个很好玩的东东：CSS Animation，CSS Transition 和 CSS Transform，顾名思义就是通过CSS来实现动画，过渡和变形。
它们与HTML5中的canvas能绘制动画图形不同，这些只能应用在已存在的元素上，但这足以让我很兴奋了，我不必要在去写那些复杂的JS代码，运用它们我能更简单的创建自己的想要的动画。
应用前景
备注：
*(1)：IE可以通过滤镜来实现部分变形
*(2) : Windows下的chrome和safair支持部分3D Transform。mac和iphone下的safair支持全部3D Transform(未验证)
*(3)：firefox3.7同IE9一样称将支持更多CSS3特性，不过最终是否支持Animation和3D Transform还不是很确定
*(4)：oprea已经在表示在Presto2.3(opera内核)中将支持Transtion。可查看wiki
接下来要开始了，各位看官准备好chrome或safair，演示和代码使用webkit的私有属性，let’s 干吧。
CSS Transition
你可以在这里看到演示，务必请用基于webkit的chrome或safair（以下同）。看完演示是不是很有兴趣想去学如何去使用了？transiton属性有这几个值：
transition-property :* //指定过度的性质，比如transition-property：backgrond 就是只指定backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:* //延迟过渡时间
transition-timing-function:*//指定过度类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
小贴士
linear //线性过度
ease-in //由慢到快
ease-out //由快到慢
ease-in-out //由慢到快在到慢
timing-funciton的几种过度类型都是基于cubic-bezier的某些特定数值。比如ease-in-out的类型它也可以写成cubic-bezier(0.42, 0, 0.58, 1.0)。你可以在这里看到 cubic-bezier曲线图
Transiton和下面的Animation都是支持CSS伪类
同样的，这些我们可以简写，拿上面的代码 -webkit-transition: all 1s ease-in-out; 包含了property , duration ,timing-fuction。
参考资料：
CSS Transitions Module Level 3 （这个是w3c的官方文档，英语好的可以详细看看）
http://webkit.org/blog/138/css-animation/ （这个webkit官方博客上的讲解，也有例子）
CSS Animation
顾名思义，这个就能实现元素的动画效果，那时我就被震惊了，无数次那尼感叹。可以先看下演示:
animation有这几个属性： animation-name//属性名，就是我们定义的keyframes animation-duration //持续时间 animation-timing-function //同上面的transition-timing-function animation-delay // 设置动画延迟 animation-iteration-count //定义循环次数，infinite为无限 animation-direction //定义动画方式
但真正让我觉的很爽的是keyframes 这个似乎有点象js里面的function，它能定义一个动画的转变过程供调用，过程为0%到100%或from(0%)到to(100%)。
参考资料：http://www.w3.org/TR/2009/WD-css3-animations-20090320/
Transform
transform就是实现元素的变形，为什么放到最后？如果跟上面的CSS Animation结合起来是不是更酷呢？先看看这样一个演示，相信你不敢相信这只用CSS写出来的效果吧。
transform有几种类型：
scale(num,num) //尺寸，scale(2,3)即x轴方向放大两倍，y轴方向放大3被，同样的可单独写scaleX(2),scaleY(3)
rotate(*deg) //旋转的角度
在2d transform中 旋转角度俺当前的平面顺时针或逆时针旋转 。在3d transform中新增了 rotateX 和rotateY它们分别以y轴或x轴为中心进行旋转，同样可以简写称rotate(*,*)。目前已被chrome和safair支持
skew（*deg）//倾斜角度，同样的有skewX和skewY 可简写为skew（*,*）
translate //移动
在2d transform中 分为translateX 和translateY 简而言之就是元素网x轴或y轴的移动距离，而在3dtransform中新增了一个translateZ 及实现Z轴的移动，实现透视效果。目前在Windows系统上还没有浏览器支持，同样的这些可以简写。
了解完这些用法后在去看看那个演示的源码，相信你肯定会惊叹transform和animation配合的动画效果了吧
参考资料：
http://www.w3.org/TR/2009/WD-css3-2d-transforms-20090320/ （w3c文档）
3D Transforms （webkit博客上的文章，所以在Windows下没法看到，不过那里有截图过过瘾，并有一个很酷在Windows下打了折扣的demo哦）
http://www.zachstronaut.com/lab/isocube.html(这个就是用transfrom实现的立方体)
CSS3窍门:隐藏文本
下面是一个非常酷的CSS 3隐藏文字信息的把戏。我们将使用的::selection定义文字的颜色。而 ::selection选择的声明是一种新的工具，在CSS 3中Internet Explorer还不能支持。当你选中网页中的文字时可以改变默认的蓝色。具体可以这样实现：
p::selection { background: #f00; } p::-moz-selection { background: #f00; }
::-moz-selection 只支持FireFox,当你选择上面的任何段落背景颜色将变为红色，我们又怎能使用隐藏文本呢？呵呵，很容易，只需更改字体的颜色和文字颜色，是对非重要 的文字相同，使用对比的单词，你要显示的颜色。为了区别隐藏的话，包装在一个<span>标记它们。
<p>These are the words I want to hide. <span>And these are the words I want to show</span></p> p::selection { background:#000;color:#000; } p::-moz-selection { background:#000;color:#000; } p span::selection { background:#fff;color:#000; } p span::-moz-selection { background:#fff;color:#000; }
使用CSS3和RGBa创建超酷的按钮
我们今天做的这些按钮，就是充分利用CSS3的圆角、盒子阴影和文字阴影效果，同时使用RGBa色彩。
1.按钮的基本设置
我们需要先设置一下按钮的基本样式，这里我们使用a标签，当然也可以使用input、button标签等，这里使用a标签是因为这三个标签中只有a标签支持:hover伪类。
以下为引用的内容：
.btn {
display: inline-block;
padding: 4px 10px;
font:bold 13px/180% Tahoma, sans-serif;
color: #fff;
text-decoration: none;
overflow:hidden;
}
2.半透明的png渐变图片
这是我们这里唯一用到的一个图片，这个透明的png图片用来实现颜色的渐变。这个图片我们可以称之为单色透明度渐变。在CSS中，使用背景演示+这样的 png图片就可以实现不同的色彩渐变效果。当然，这个不是CSS3的特性，除了IE6以下版本的浏览器，所有的浏览器都可以实现这样的效果。你可以点击这 里查看该png文件。
以下为引用的内容：
.btn {
...
background: #222 url(sprites.png) repeat-x;
/**background**/
}
3.圆角
圆角(border-radius)是目前浏览器支持最好的CSS3特性之一，除了IE系浏览器，各个A级浏览器都支持，尽管大都是通过私有属性来实现的，至少，这是可用的。
以下为引用的内容：
.btn {
...
background: #222 url(sprites.png) repeat-x;
/**背景图片**/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/**圆角**/
}
4.阴影和RGBa
box-shadow和text-shadow是CSS3新增的两个重要的属性，它们可以很方便的实现块级元素阴影和文字的阴影。但是，如果如果阴影的 颜色使用半透明效果，岂不是更好?这样元素可以更好的和背景融合到一起。值得注意的是，FF只有等到3.5版本才支持text-shadow属性(目前 Firefox3.5beta4版本已经支持)。
以下为引用的内容：
.btn {
background: #222 url(sprites.png) repeat-x;
/**背景图片**/
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
/**圆角**/
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
/**按钮阴影**/
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
/**文字阴影**/
}
最后，让我们来可怜一下IE浏览器吧，这些按钮在IE7和IE8浏览器中会显示直角、有渐变色、无阴影、无透明色，但是在IE6中，它将显示浅蓝色的背景，这是因为IE6不支持png透明所致，如果你想让它在IE6中能够像个按钮，就用那些js后IE的滤镜来处理吧。
CSS3实例教程
【CSS3实例解析1】照片墙效果（旋转放大）
【CSS3实例解析2】点击放大，左右滑动效果
【CSS3实例教程3】CSS3动画实例教程（集合贴）
Bulletproof CSS3 Dropdown Navigation Menu
CSS3酷炫插件
［幻灯插件］impress.js 完全教程 纯HTNL5、CSS3