<HTML5秘籍>——第6章（美妙的CSS3字体和特效）

1.透明

第一种是使用rgba()函数

兼容性:IE9+

.box {  background: rgba(170, 240, 0, 0.5);}

不支持rgba()函数的浏览器会忽略这条规则，而相应的元素会带有默认不透明的背景。因此，更好的做法是

.box {  background: rgba(0, 0, 0);  background-color: rgba(0, 0, 0, .5);}

如果你坚持在IE8-下也要用透明色背景的话，可以这样,详细请看张鑫旭老师的这篇文章RGBA颜色与兼容性的半透明背景色

.box {  background: rgba(0,0,0,.5);  filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);}

第二种是使用一个opacity的属性

兼容性：IE9+

.box {  opacity: .8;    flter: alpha(opacity=80); IE8-下使用}

用在元素，不仅背景元素，就连文本颜色颜色、边框颜色也会变透明

2.圆角border-radius属性

兼容性：IE9+

border-radius属性每一个角有两个值，分别代表水平半径和垂直半径

.box {  border-top-left: 150px 30px;}

3.多背景

兼容性：IE9+

第一步是设置background-image属性，然后再设置每张图片的位置并控制它们是否重复，分别使用background-position和background-repeat属性。

这里的关键是这三个属性值的顺序要匹配。

.bg {  background-image: url(top-left.png), url(bottom-right.png);  background-position: left top, right bottom;  background-repeat: no-repeat, repeat-x;}

如果浏览器不支持多背景呢？那么它会完全忽略这些背景属性。为避免无背景情况，最好还是先用background-image属性先设置一个后备的背景图片或者用background-color先设置一个后备背景颜色

4.阴影

CSS3定义了两种阴影：盒子阴影box-shadow和文本阴影text-shadow。这两者中，前者更有用。设置盒子阴影的同时也要设置边框，这样就仍然有盒子的感觉。

兼容性：（box-shadow）IE9+、（text-shadow）IE10+

.box {  box-shadow: 5px 5px 10px gray;}

前两个值是水平和垂直方向的偏移量。如果是正值，那么阴影就会向右向下偏移。接着设置模糊距离（即阴影从开始这里效果上一直增大就像是一滴墨水滴在清水上，散开了，越来越淡），最后一个阴影颜色。

如果还想再调整的话，第一个调整地方时在模糊值和颜色值之间，加上设置阴影伸展范围(spread,阴影的尺寸)，即增大模糊边界之前的实心颜色面积。效果上感觉是增加了阴影，向四周发散，但却没有降低模糊值

.box {  box-shadow: 5px 5px 10px 10px 5px gray}

第二个调整地方是，可以在最后加上单词inset，这样就可以在元素内部创建一个阴影。在不设置水平和垂直阴影偏移值的情况下这个效果是最好的。

.box {  box-shadow: 0 0 20px lime inset;}

类似的，text-shadow也需要一个值列表，但值的顺序有所不同。首先要指定颜色值，然后才是水平和垂直偏移值，最后是模糊值

.text {  text-shadow: gray 10px 10px 7px;}

Shadows，点击此链接看看效果，总觉得text-shadow和box-shadow的模糊值的效果不一样啊

文字阴影和盒子阴影都可以设置多重阴影

5.渐变

以前都是用背景图片来弄渐变效果的。但CSS3允许我们自己来定义渐变。使用CSS3的优点是可以让浏览器少下载图片，而且这种渐变能够无缝地适应各种大小的空间

CSS3支持两种渐变：线性渐变和放射性渐变。线性渐变就是沿直线混合几种颜色，而放射性渐变则是在圆心与圆周之间混合颜色。

兼容性：IE10+，因此在IE低版本上使用渐变，千万别忘了先写一条background声明，为该属性指定一个实心颜色作为后备。

①线性渐变

.gradient {  background: linear-gradient(from top, white, blue);}

从上到下，从白到蓝的渐变效果

改成top，就变成从下到上，但最后还是用from好，可以跨兼容性，因此有个-webkit-linear-gradient，下面提到

要多用几种颜色？没问题，只要在后面依次列出颜色值即可

最后，还可以使用渐变点(gradient stop)控制每种颜色的起点。每个渐变点用百分比值表示，0%就是整个渐变的起点，而100%是整个渐变的终点。

.gradient {  background: linear-gradient(from top, red 0%, orange 20%, yellow 80%, wiolet 100%);}

对于有些浏览器，还炫耀加上开发商前缀-webkit。糟糕的是，-webkit-linear-gradient()函数和真正的linear-gradient()函数有一些细微的差别。与linear-gradient()不同，-webkit-linear-gradient()不使用from来指定方向，而是自动赋值。因此，兼容性写法是：

.gradient {  background: light-blue;  background: -webkit-linear-gradient(top left, white, lightblue);  background: linear-gradient(from top left, white, lightblue);}

当然，上面的后备方案是用了background-color作为后备颜色，但其实也可以用background-image做为后备方案，先进的浏览器一般也聪明，除非必要，否则它们不会下载后备图片，从而节省带宽。

2.放射性渐变

radial-gradient()函数的第一个值是circle或者ellipse,表示圆形放射或是椭圆形

.radial-gradient {  background: -webkit-radial(circle, white, lightblue);  background: radial-gradient(circle, white, lightblue);}

放射性渐变也有渐变点，和线性渐变语法一样

另外，我们也可以用百分比来设置渐变的中心位置，不过不要试图在有开发商前缀的-webkit-radial-gradient()函数中使用它，还有比较新的特性

.radial-gradient {  background: radial-gradient(cilrle at 90% 5%, white, lightblue);}

上面这对百分比告诉浏览器渐变开始的位置为离左边缘90%和离上边5%

③循环渐变

repeating-linear-gradient()和repeating-radial-gradient()函数的语法基本上与linear-gradient()和radial-gradient()一样。唯一不同是：你需要确保限制了渐变的大小，使其可以循环。

比如，下面这样和普通渐变完全一样，因此它没有限制大小

.repeat {  background: repeating-radial-gradient(circle, yellow, green);}

要这样限制大小才行，可以用百分比值，也可以用像素值

.repeat {  background: repeating-radial-gradient(circle, yellow, green 10%);}

有两个使用的警示：首先，只能用top关键字，而不能用from，因为一个循环渐变只能向一个方向填充。其次，如果想要渐变的每一个循环过渡得平滑一些，而不是生硬的一个颜色变化，就要确保颜色列表中的最后一个颜色和第一个颜色一样。

最后，其实有渐变工具的，Ultimate CSS Gradient(本人使用过，大家可以用用，可以导入图片让它分析，然后生成渐变CSS代码)

6.过渡transition

如果要把过渡transiton用在按钮的悬停hover上，那么相应的属性生命要写在正常状态下的样式规则中

注意点：①最低限度要为每个过渡设置两方面信息，要过渡的CSS属性和动画时长

②如果要使用多个CSS属性，那么可以用逗号作为分隔符或者用all来代替所有CSS属性

.btn {  -webkit-transition: background .5s, color .5s;  transition: background .5s, color .5s;}

适合过渡的属性：①透明度，可以实现图像淡入淡出。但要记住，别把图像变得完全透明，否则访客根本不知道图像在哪

②阴影：特别是没有偏移但有模糊的阴影，可以用来生成经典的发光效果

③渐变：把线性渐变改成放射性践行

④变形：移动元素、调整元素大小、甚至是对任意元素变形

不适合过渡的元素：对内边距、外边距、字体大小应用过渡不值得考虑、这些过渡操作会耗费更多电量（因为浏览器要重新计算布局大小或者问题提示），而且可能导致响应迟钝和卡壳。如果你想移动、放大或缩小元素，那么最好还是使用变形技术（因为变形不会影响页面中的其他元素，也不会影响布局）

当然，transition还有加上调速函数,ease-in-out（刚开始很慢，然后加速，最后慢下来），ease-in（过渡开始慢，然后以恒定速率运行）等等，还可以加上一个可选的延迟

transition: opacity 10s ease-in-out .1s;

可以访问这个网站CSS transitions 查看不同的调速函数

7.变换transform

要让变换在Chrome、Safari和Opera上生效，需要添加-webkit-前缀。在IE9中，需要添加-ms-前缀，IE10+不需要，Firefox也不需要。

兼容性:2D变换（IE9+）、3D变换（IE10+）

.rotatedElement {  -ms-transform: rotate(45deg);  --webkit-transform: rotate(45deg);  transform: rotate(45deg);}

2D变换函数

translateX：水平方向移动元素，正值向右移动,还有translateY、translate(x, y)

scaleX(x)：水平方向缩放元素。比1.0大的值是放大。使用负值会将元素绕y轴翻转，创建一个从右到左的镜像。还有scaleY(y)、scale(x, y)

rotate(angle)：围绕元素中心顺时针旋转，负值逆时针。可以用CSS的transform-origin属性让元素围绕其他点旋转

skewX(angle)：在水平方向倾斜元素。上下仍然水平，左右边缘倾斜。还有skewY(angle)、skew(x-angle, y-angle)

matrix(n1, n2, n3, n4, n5, n6)：用矩阵乘法来变换元素。可以生成前面几种变换组合。但最好还是用工具来生成

3D变换函数

translate3d、scale3d、rotateX、rotateY、rotateZ（rotateX则围绕X轴，rotate默认是rotateZ）

网站链接： CSS transforms

8.Web字体

兼容性：所有浏览器都支持@font-face，但它们支持的字体文件格式却不一样

关键点：要用@font-face功能并支持大部分浏览器，，需要将字体制作成多种格式。

最佳实践方案是包含一个WOFF文件（在现代浏览器上性能最好，IE9+）、一个EOT文件（兼容旧版IE）以及一个TTF或者OTF文件（兼容Andorid和旧版非IE浏览器，桌面常用的字体格式）。最后最好再为旧版的iPad和iPhone提供一个低质量的SVG文件（旧版的移动版Safari和使用Andorid的移动设备）

CSS3通过@font-face为浏览器增加了强大的字体功能。使用这个功能的步骤如下：

①把字体上传到网站（或者为了支持不同的浏览器，上传该字体的多个不同版本）

②使用@font-face命令注册每一个想要在样式表中使用的字体

③在样式表中使用注册过的字体，就像使用Web安全字体一样使用字体名字

④浏览器在遇到使用Web字体的样式表时，就会把字体下载到页面和图片的临时缓存中。然后就在你的网页或网站中使用该字体。如果其他网页也要使用相同的字体，则需要分别注册并提供自己的字体文件

给网站找字体

①下载一种免费网络字体，比如Font Squirrel Font Squirrel

先下载TTF或TOF文件，再往该网站上传下载好的文件，最后会生成如下文件

license.text、font.eot、font.svg、font.ttf、font.woff 、demo.html（演示页面）、stylesheet.css

css文件的开头写了一个复杂的@font-face规则，如下所示

@font-face {  font-family: 'ChantelliAnitiquaRegular';  src: url('Chantelli_antiqua-webfont.eot');  src: local('Chantelli Antiqua'),      url('Chantelli_antiqua-webfont.woff') format('woff'); （这里的顺序很重要，woff格式的字体质量最高）     url('Chantelli_antiqua-webfont.tff') format('truetyoe');    url('Chantelli_antiqua-webfont.svg') format('svg);}

第1行：@font-face是正是注册字体的工具，注册之后才能在样式表的其他地方使用该字体

第2行：给这款起个名字，具体叫什么取决于你

第3行：首先必须注册EOT格式的字体文件，这样IE不理解其他规则也没有关系

第4行：接下来使用local()函数，这个函数告诉浏览器这个字体的名字，如果恰好访客的电脑中安装了这种字体，浏览器就会使用它。当然也有可能会加载另一个同名的字体。为此，Web设计人员有时候会在此传入一个明显瞎编的字体名，让浏览器在本地找不到该字体。例如，一个笑脸local('^_^')

②将已有的桌面字体转化为网络字体

使用Google字体：Google WebFont,  关键是访问不了

使用Google Fonts，不必担心字体格式，因为 谷歌会监测用户的浏览器并自动发送正确的字体文件。你只需要一个谷歌生成的样式文件

我个人是推荐这个网站IconMoon App，用来制作过svg，也可以制作Web font

9.多栏文本

兼容性：IE10+

设置栏数

.Content {  text-align: justify;  -moz-column-count: 3;  -webkit-column-count: 3;  column-count: 3;}

这种创建多栏的方式适合固定布局。如果网页区域随着浏览器窗口缩放而变化，那么这些栏可能会变得过宽。此时，最好的方法是不要设置栏数，而是使用column-width属性告诉浏览器每一栏有多款
注意点：在指定栏宽时可以使用像素单位，但使用em单位才是首选。因为em单位与当前字体大小是匹配的，所以如果网页访客调大了浏览器中的字号，那么栏宽也会按比例加大。

还可以用column-gap调整分栏之间的间隔，类似于margin；也可以用column-rule来添加一条垂直的分割线，类似于border；还可以用column-span属性让图片或其他元素横跨多列，但只有两个值：1和all（如果图片样式的float属性为非none值，那么这种方法将无效。这是因为浮动的图片已经具备浮动于布局和它所包含的任何列之外）

10.CSS3属性选择器

①CSS3的子字符串匹配属性选择器

兼容性：IE7+

【】以特定前缀开头 ele[attr^="value"]

【】包含特定字符串  ele[attr*="value"]

【】以特定后缀结尾  ele[attr$="value"]

【】包含特定字符串且以字符串开头并用连字符连接 ele[attr|="value"]，比如<div class="value-hello"></div>

②CSS3结构伪类

a. :last-child选择器

CSS2.1已经有了:first-child(IE7+)，CSS3又增加了:last-child（IE9+）

b.nth-child选择器

用法：nth-child(even)，选择偶数子元素;还有:nth-child(odd)

:nth-child(n)，n有下面几种

使用整数：  :nth-child(2)，选择第2个子元素（以1开始，不是0）

使用数值表达式： nth-child(3n+1)，从第一个元素开始，然后每三个元素选一个(1,4,7)

数值表达式也可以使用负值：bth-child(3n-2)，表示从倒数第2个元素开始然后每三个元素选择一个

c. :nth-last-child，与:nth-child的区别在于，:nth-last-child是从文档节点数的末尾开始算。

比如:nth-last-child(-n+3)就是从倒数第三个元素开始，向后选择之后的所有元素（因为使用了-n，所以方向是向后）

:nth-last-of-type，前面的例子中在对子元素计数时都未考虑元素的类型，这可以指定你想选择的元素类型（比如，指定有某类名的子元素）

nav ul li.internal:nth-of-type(n+2) a {

  color: red;

}

如果有些li列表项没有internal类名，那么就不算进去。上面的代码告诉浏览器：“从第二个匹配元素开始，选择每一个类名为internal的列表项”

d.否定（:not）选择器，用来选择不满足某些条件的元素

nav ul li:not(.internal) a {},用来选择没有internal类的列表项

e.对伪元素的修改

CSS3要求对伪元素使用两个冒号以便与伪类进行区别。但注意IE8-无法识别两个冒号的语法。