搜索
06.几个CSS3高级特性内容•使用CSS3制作文字阴影•使用CSS3制作盒阴影（即元素投影）•使用CSS3制作渐变背景•使用CSS3的多重背景图片•使用CSS3背景渐变来制作图案•使用CSS3的@font-face规则来制作节省带宽的图标文字阴影•文字阴影的基本语法：.element{text-shadow:1px1px1px#cccccc;}•第一个值指的是右侧阴影的大小，第二个值指的是下方阴影的大小，第三个值指的是模糊距离（即阴影从开始变淡到完全消失的距离），最后一个值是阴影颜色。•阴影颜色也可以是HSL(A)或RGB(A)：text-shadow:4px4px0pxhsla(140,3%,26%,0.4);如何定义颜色•考虑到浏览器兼容性，在使用HSLA或RGBA阴影时我一般都这样做：text-shadow:4px4px0px#404442;text-shadow:4px4px0pxhsla(140,3%,26%,0.4);•即先定义一个使用十六进制颜色的阴影（作为针对老版本浏览器的备用方案），然后再定义一个使用HSLA或RGBA颜色的阴影。•其他使用颜色的地方都可以这样处理。•阴影值也可以使用em或rem单位•如：文字的大小是102像素，文字阴影大小是4像素。使用公式：目标元素尺寸÷上下文元素尺寸=百分比尺寸来计算一下（4÷102=.039215686），结果如下：text-shadow:.039215686em.039215686em0em#dad7d7;/*4÷102*/•阴影一般都比较小，一个或两个像素的阴影，在所有视口中的效果都很不错。所以就用px单位也行。•如果要在一大段阴影文字中取消一部分文字的阴影，可使用：text-shadow:none;•使用负值可以制作出左上方阴影效果，例如：text-shadow:-4px-4px0px#dad7d7;•如果不需要阴影模糊效果，可以将text-shadow的第三个值（模糊半径）从声明中删除：text-shadow:-4px-4px#dad7d7;–这种简写假定第三个值没有声明，而前两个值表示阴影偏移距离。text-shadow特效•浮雕文字阴影效果text-shadow:01px0hsla(0,0%,100%,0.75);•多重文字阴影–只需将两组值使用逗号分隔开即可，比如：text-shadow:0px1px#ffffff,4px4px0px#dad7d7;盒阴影•语法很简单：box-shadow:0px3px5px#444444;•但是，盒阴影的的跨浏览器支持并不好，所以明智的做法是使用浏览器私有前缀，例如：-ms-box-shadow:0px3px5px#444444;-moz-box-shadow:0px3px5px#444444;-webkit-box-shadow:0px3px5px#444444;box-shadow:0px3px5px#444444;.sideBlockimg{max-width:45%;box-shadow:0px3px5px#444444;}•图片加上了box-shadow效果：box-shadow特效•内阴影——出现在元素内部，而不是外部。内阴影可用来制作光晕效果，如下所示：box-shadow:inset0040px#000000;•例如：，为整个页面添加光晕效果，这样就会让页面的四周都出现阴影。body{-moz-box-shadow:inset0030px#000000;-webkit-box-shadow:inset0030px#000000;box-shadow:inset0030px#000000;}•多重阴影：box-shadow:inset0030pxhsl(0,0%,0%),inset0070pxhsla(0,97%,53%,1);线性渐变•用纯CSS3就可以做出渐变，而且不用图片，代码如下：background:linear-gradient(90deg,#ffffff0%,#e4e4e450%,#ffffff100%);四个参数的含义如下：1.第一个值定义了渐变的方向。不定义该值则默认是一个垂直从顶部到底部的渐变。你还可以使用如totopright这样的值，这会产生一个朝向右上角的对角线渐变。2.下一个值定义的是渐变的“起点”，包括起点的颜色和位置。你也可以使用像blue20%这样的值，这样就是从蓝色开始渐变到下一个颜色，而渐变开始位置则位于假想的渐变路径的20%处。同样，起点位置也可以使用负值，这样渐变从实际可见区域之外就开始了。3.下一个值指的是“过渡颜色点”。我们来回顾一下：沿着90度垂直方向，从白色开始（(#ffffff0%），向位于渐变路径50%处的#e4e4e4这个颜色（浅灰色）渐变。这里就是渐变中的第一个过渡颜色点。如果需要的话，可以在渐变“终点”之前定义更多的过渡颜色点（使用逗号分隔）。4.圆括号中的最后一个值始终是渐变的“终点”。不论在起点之后放置了多少个过渡颜色点，最后一个值始终是终点。径向背景渐变•径向渐变是从一个中心点开始，依据椭圆形或圆形进行扩张渐变。•径向背景渐变的语法如下所示：background:radial-gradient(center,ellipsecover,#ffffff72%,#dddddd100%);–在圆括号中设定起点。center表示中心，也可以使用如25px25px这样的值，这就表示从距元素上边和左边均为25像素的那个点开始渐变。–下一个值更简单，它指的是径向渐变的形状和大小。（稍后详述）–接下来是定义渐变起点、过渡点以及终点的颜色和位置（这部分和线性渐变是一样的）。•径向渐变的形状和大小：–形状：circle或ellipse–大小：•closest-side：（渐变形状是圆形时）以距离中心点最近的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最近的水平或垂直边为渐变半径。•closest-corner：以距离中心点最近的一角为渐变半径。•farthest-side：和closest-side正好相反，（渐变形状是圆形时）以距离中心点最远的一边为渐变半径，或者（渐变形状是椭圆形时）以距离中心点最远的水平或垂直边为渐变半径。•farthest-corner：以距离中心点最远的一角为渐变半径。•cover：和farthest-corner完全一样。•contain：和closest-side完全一样。制作完美CSS3渐变的简便方法•如果写出一个CSS3渐变对你来说有点难度，那你可以考虑使用在线渐变生成器。•如：。•它的用户界面风格很像图像处理软件，你可以选择颜色、过渡点、渐变风格（线性渐变或径向渐变），甚至可以选择自己喜欢的颜色空间（HEX、RGB(A)、HSL(A)）。这个在线渐变生成器还会加载一些预置的渐变供你选用和修改。如果这些还不足以打动你，须知它还提供了可选的代码设置，用来修正IE9，让它显示渐变效果，而且还为老版本浏览器提供了备用的背景颜色。•它还能基于已有的图片直接生成渐变。在线渐变生成器preview重复渐变•重复线性渐变：background:repeating-linear-gradient(90deg,#ffffff0px,hsla(0,1%,50%,0.1)5px);•重复径向渐变：background:repeating-radial-gradient(2px2px,ellipse,hsla(0,0%,100%,1)2px,hsla(0,0%,95%,1)10px,hsla(0,0%,93%,1)15px,hsla(0,0%,100%,1)20px);背景渐变图案——css3patterns•用CSS制作的背景图案。代码如下：示例body{background-color:white;background-image:radial-gradient(hsla(0,0%,87%,0.31)9px,transparent10px),/*径向*/repeating-radial-gradient(hsla(0,0%,87%,0.31)0,hsla(0,0%,87%,0.31)4px,transparent5px,transparent20px,hsla(0,0%,87%,0.31)21px,hsla(0,0%,87%,0.31)25px,transparent26px,transparent50px);/*重复径向渐变*/background-size:30px30px,90px90px;background-position:00;}CSS3的响应性•可以使用媒体查询为大视口（或小视口）设定一个具体规则：@mediascreenand(max-width:768px){（略）｝例1:组合使用CSS3属性•现有一链接，样式如下：#contenta{text-decoration:none;font:2.25em/*36px÷16*/'BebasNeueRegular';}•该链接按钮的文字使用的是自定义字体（第5章已讲过）•现在为该链接添加新样式。要求：–该链接按钮有一个红色的渐变背景–使用圆角效果–并有一点阴影•首先，针对老版本浏览器为其添加一个背景颜色。这样就算浏览器无法渲染渐变，它至少也可以有一个红色的背景。注意使用十六进制颜色值。#contenta{text-decoration:none;font:2.25em/*36px÷16*/'BebasNeueRegular';background-color:#b01c20;}•接下来添加圆角效果#contenta{text-decoration:none;font:2.25em/*36px÷16*/'BebasNeueRegular';background-color:#b01c20;border-radius:8px;}•此处及后续章节中都请注意，在代码示例中添加的所有CSS3属性，一般都需要设定浏览器私有前缀，为简洁起见在此处省略了前缀•给其追加一个float:left，同时设置背景渐变：#contenta{text-decoration:none;font:2.25em/*36px÷16*/'BebasNeueRegular';background-color:#b01c20;border-radius:8px;color:white;padding:30px;float:left;background:linear-gradient(90deg,#b01c200%,#f15c60100%);}–float:left文本或图像会移至父元素中的左侧。–float:right文本或图像会移至父元素中的右侧。–float:none默认。文本或图像会显示于它在文档中出现的位置•再追加一点上边距，设置一下阴影效果：#contenta{text-decoration:none;font:2.25em/*36px÷16*/'BebasNeueRegular';background-color:#b01c20;border-radius:8px;color:white;padding:30px;float:left;background:-moz-linear-gradient(90deg,#b01c200%,#f15c60100%);margin-top:30px;box-shadow:5px5px5pxhsla(0,0%,26.6667%,0.8);}•再来些许浮雕效果，添加一点文字阴影和一个很细的白边#contenta{text-decoration:none;font:2.25em/*36px÷16*/'BebasNeueRegular';background-color:#b01c20;border-radius:8px;color:white;padding:30px;fl