<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-无法识别两个冒号的语法。