响应式设计入门-06 CSS3：阴影、渐变和图片背景

1、06.几个CSS3的高级特性，内容，使用CSS3制作文本阴影制作框阴影(即元素投影)使用CSS3制作渐变背景使用CSS3制作多个背景图片使用CSS3背景渐变制作图案使用CSS3字体-面规则制作节省带宽的图标，文本阴影，文本阴影的基本语法：element text-shadow 3360 1px 1px # ccccc；第一个值是指右阴影的大小，第二个值是指下阴影的大小，第三个值是指模糊距离(即从阴影开始到完全消失的距离)，最后一个值是阴影颜色。阴影颜色也可以是HSL(A)或RGB (a):文本阴影： 4px 4px 0px HSLA (140，3%，26%，0.4)；如何定义颜色，考虑到浏览器

2、兼容性，我通常使用HSLA或RGBA阴影：文本阴影： 4px 4px 0px # 404442text-shadow : 4px 4px 0px HSLA(140，3%，26%，0.4)；也就是说，首先使用十六进制颜色定义阴影(作为旧浏览器的替代方案)，然后使用HSLA或RGBA颜色定义阴影。其他使用颜色的地方可以这样对待。阴影值也可以使用em或rem单位，例如，文本的大小为102像素，文本的阴影大小为4像素。使用公式：目标元素大小上下文元素大小=百分比大小来计算(4102=.039215686)，结果如下：文本阴影：039215686 em . 039215686 em 0 em # dad

3、7d 7；/* 4 102 */阴影通常很小。一个或两个像素的阴影在所有视口中都非常有效。所以可以使用像素单位。如果你想去掉大阴影文本中一部分文本的阴影，你可以使用：text-shadow : none；负值可用于在左上角创建阴影效果，例如：text-shadow 3360-4px-4px 0px # dad7d 7；如果不需要阴影模糊效果，可以从声明中删除文本阴影的第三个值(模糊半径):text-shadow :-4px-4px # dad7d 7；该简写假设第三个值未声明，而前两个值表示阴影偏移距离。文本阴影效果，浮雕文本阴影效果文本阴影： 0 1px0hsla (0，0%，100%，0.

4、75)；多个文本阴影只需要用逗号分隔两组值，例如：文本阴影： 0px 1px # ffffff，4px 4px 0px # dad7d7，box shadow，语法非常简单：box-shadow : 0px 3px 5px # 44444；但是，对box shadow的跨浏览器支持并不好，所以使用浏览器私有前缀是明智的，例如：-ms-box-shadow : px 3px 5px # 44444；-moz-box-shadow : 0px 3px 5px # 444444；-WebKit-box-shadow : 0px 3px 5px # 444444；box-shadow : 0px 3p

5、x 5px # 44444；侧边锁定img最大宽度：45%；box-shadow : 0px 3px 5px # 44444；框阴影效果被添加到图片中：框阴影效果，并且内部阴影出现在元素内部而不是外部。内部阴影可以用来制作光晕效果，如下图：盒形阴影：嵌入0 040px # 000000例如，给整个页面添加一个光晕效果，使阴影出现在页面周围。body-moz-box-shadow : inset 0 0 30px # 000000；-WebKit-box-shadow : inset 0 0 30px # 000000；box-shadow : inset 0 0 30px # 000000；多

6、重阴影：盒形阴影： INSET 0030像素HSL(0.0%，0%)，INSET 0070像素HSLA(0.97%，53%，1)；线性渐变，渐变可以用纯CSS3制作，不需要图片，代码如下：背景：线性渐变(90度，# ffffff0%，# e4e4e4 50%，# ffffff 100%)；四个参数的含义如下：第一个值定义梯度的方向。如果未定义该值，默认情况下，它将是从上到下的垂直梯度。您也可以使用一个值，如右上角，这将产生一个向右上角倾斜的渐变。下一个值定义渐变的“起点”，包括起点的颜色和位置。您也可以使用类似蓝色20%的值，这样您可以从蓝色开始到下一种颜色，并且渐变的开始位置位于假想渐变路径

7、的20%。类似地，负值可用于起始位置，从而梯度从实际可见区域之外开始。下一个值是指“过渡色点”。让我们回顾一下：沿着90度的垂直方向，从白色开始(#ffffff 0%)，它逐渐变为位于渐变路径50%的颜色# #e4e4e4(浅灰色)。这是渐变中的第一个过渡色点。如有必要，您可以在渐变“终点”前定义更多过渡色点(用逗号分隔)。括号中的最后一个值始终是渐变的“终点”。无论起点后有多少个过渡色点，最后一个值始终是终点。径向背景梯度，径向梯度从中心点开始，按照椭圆或圆展开。径向背景梯度语法如下：背景：径向梯度(中心、椭圆盖、# ffffff72%、# dddddd 100%)；在括号中设定起点。Cen

8、ter代表center，或者可以使用25px 25px这样的值，这意味着渐变从距离元素顶部和左侧25个像素的点开始。下一个值更简单，它指的是径向梯度的形状和大小。下一步是定义渐变的起点、过渡点和终点的颜色和位置(这部分与线性渐变相同)。径向渐变形状和大小：形状：圆形或椭圆形大小：最近边：(当渐变形状为圆形时)将最靠近中心点的边作为渐变半径，或者(当渐变形状为椭圆形时)将最靠近中心点的水平或垂直边作为渐变半径。最近角：以最靠近中心点的角为梯度半径。最远侧：与最近侧相反，距离中心点最远的一侧用作梯度半径(当梯度形状为圆形时)，或者距离中心点最远的水平或垂直侧用作梯度半径(当梯度形状为椭圆形时)。最

9、远角：以离中心点最远的角为梯度半径。封面：它和最远的角落完全一样。包含：与最近侧完全相同。制作完美CSS3渐变的简单方法。如果你很难写一个CSS3渐变，你可以考虑使用一个在线渐变生成器。例如，它的用户界面风格非常类似于图像处理软件。您可以选择颜色、过渡点、渐变样式(线性渐变或径向渐变)，甚至选择您喜欢的颜色空间(十六进制、RGB(A)、HSL(A)。这个在线梯度发生器也将加载一些预设梯度供你选择和修改。如果这些不足以给你留下深刻印象，应该注意的是，它还提供了可选的代码设置来修改IE 9以显示渐变效果，并且还为旧浏览器提供了一种替代的背景颜色。它还可以基于现有图片直接生成渐变。在线梯度发生器预览

10、，重复梯度，重复线性梯度：背景：重复线性梯度(90度，# ffffff 0px，HSLA(0.1%，50%，0.1)5px)；重复径向梯度：背景：重复-径向梯度(2px 2px，椭圆，HSLA (0，0%，100%，1) 2px，HSLA (0，0%，95%，1) 10px，HSLA (0，0%，93%)，背景梯度图案css图案，用CSS制作的背景图案。代码如下：示例，主体背景-颜色：白色；背景图像：径向梯度(HSLA (0，0%，87%，0.31) 9px，透明10px)，/*径向*/重复径向梯度(HSLA (0，0%，87%，0.31) 0，hsla(0，0%，87%，0.31) 4px，

11、透明5px，透明20px，hsla(0，0%，87%，0.31) 21px，hsla(0，0%，87%，0.31) 25px/*重复径向梯度*/背景尺寸： 30px 30px，90px 90px背景-位置： 0 0；CSS3响应性，您可以使用媒体查询为大视口(或小视口)设置特定规则：媒体屏幕和(最大宽度： 768px)(省略)，案例1:组合使用CSS3属性，并有一个具有以下样式的链接：# content a text-decoration 3360 none；font : 2.25 em/* 36px 16 */BebasNeueRegular；链接按钮的文本是自定义字体(如第5章所述)。现在

12、给链接添加一个新样式。要求：链接按钮有一个带圆角和一点阴影的红色渐变背景。首先，为旧浏览器添加背景色。这样，即使浏览器不能渲染渐变，它至少可以有一个红色背景。注意使用十六进制颜色值。# content a text-decoration : none；font : 2.25 em/* 36px 16 */BebasNeueRegular；背景-color : # b01c 20；然后添加圆角效果#内容文本装饰： nonefont : 2.25 em/* 36px 16 */BebasNeueRegular；背景-color : # b01c 20；border-radius : 8px；请注意

13、，在这里和后面的章节中，代码示例中添加的所有CSS3属性通常都需要用浏览器私有前缀来设置。为简洁起见，此处省略了前缀，并添加了一个左浮动：同时设置了背景渐变：# Content a text-decoration 3360 none；font : 2.25 em/* 36px 16 */BebasNeueRegular；背景-color : # b01c 20；border-radius : 8px；color:白色；padding: 30px左侧浮动：背景：线性梯度(90度，#b01c20 0%，# f15c 60 100%)；浮动：文本或图像在父元素中向左移动。浮动：右文本或图像在父元素中

14、向右移动。默认值为Float:none。文本或图像将显示在文档中出现的位置，然后添加一点上边距来设置阴影效果：# content a text-decoration : none；font : 2.25 em/* 36px 16 */BebasNeueRegular；背景-color : # b01c 20；border-radius : 8px；color:白色；padding: 30px左侧浮动：背景：-moz-线性梯度(90度，#b01c20 0%，# f15c 60 100%)；margin-top : 30px；盒式阴影： 5px 5px HSLA(0，0%，26.6667%，0.8

15、)；和一点浮雕效果，添加一点文字阴影和一个非常薄的白色边缘#内容一个文字装饰：无；font : 2.25 em/* 36px 16 */BebasNeueRegular；背景-color : # b01c 20；border-radius : 8px；color:白色；padding: 30px左侧浮动：背景：-moz-线性梯度(90度，#b01c20 0%，# f15c 60 100%)；margin-top : 30px；盒式阴影： 5px 5px HSLA(0，0%，26.6667%，0.8)；text-shadow: 0px 1px黑色；border: 1px固体# bfbfbf使用CSS3而不是图片来达到这个效果，最好的事情是你可以在超链接中包含任何东西，并且它的效果保持完美。一个常见的设计要求是在页面的顶部和底部制作不同的背景图片。或者可能需要在页面中某个内容模块的顶部和底部有不同的背景图片。在使用CSS3之前