16-CSS3

CSS3

渐变背景

使用场景。例如：http://www.woniuxy.com/

在网页设计的过程中，我们设置网页背景的时候有可能不是一个纯色的背景，可能是一个渐变的背景。

问题：像这种蜗牛官网这种渐变背景的页面怎么来做？

我们可以通过背景图片来做，像这种规则渐变图片，可以切1px像素的图片进行平铺，那种不规则图片只能引用整张图片，每次修改都很麻烦，需要设计改图；所以通过图片来实现渐变，可拓展性差，还影响页面加载速度。

如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果。

CSS3提供了两种渐变：线性渐变和径向渐变

渐变：其实就是一个”图像“，所以使用background-image属性

线性渐变

• 默认从上到下，至少有两个颜色，通过linear-gradient来设置

• 线性渐变是渐变线（方向）和色标组成

• 语法：

  /* linear-gradient 是用于创建一个线性渐变的 "图像" */
  baclground-image:linear-gradient(颜色1，颜色2,....);
  backgound-image:linear-gradient(to 结束的方向，red，green)
  baclground-image:linear-gradient(颜色1 百分比，颜色2 百分比,....);
  baclground-image:linear-gradient(渐变线方向，颜色1 位置， 颜色2   位置， 颜色3   位置)；
  渐变线方向：  to 方向单词    角度deg
  色标：
  	颜色：十六进制，rgb ，rgba，单词
  	位置：百分比，或者像素
  1
  2
  3
  4
  5
  6
  7
  8
  9

方向（渐变线）

• 用来控制渐变的方向

• 原理：

  渐变线是从渐变盒子中心点向两个方向径向延伸，起点和终点是渐变线与经过渐变盒子的一个角的垂直线的相交点。

​

• 方向取值范围

  • 单词：利用to来指定渐变线结束的方向，top bottom left right

    语法：

    backgound-image:linear-gradient(to 结束的方向，red，green)
    1

    • to top—— 0deg
    • to bottom（默认值） —— 180deg或者 -180deg
    • to left —— -90deg或 270deg
    • to right—— 90deg或-270deg
    • to top left—— -45deg
    • to top right —— 45deg
    • to bottom left —— -135deg
    • to bottom right —— 135deg （-225deg）

  • 角度方向：deg单位

    角度可以设置正数或者负数。

    0deg表示沿着中心线由下向上的方向，类似y轴的负方向，正数角度代表顺时针旋转多少度，负数代表逆时针旋转

    语法：

    background-image:linear-gradient(角度，red,green);
    1

    

色标

​ 色标=（颜色位置）

• 色标包含一个颜色和一个位置，用来控制渐变的颜色变化

• 取值：

  • 颜色：单词，十六进制，rgb，rgba（设置背景颜色可以透明）
  • 位置：百分比，像素px

• 注意：

  • 渐变没有写位置值，只有颜色，均匀渐变效果；

    background-image: linear-gradient(green,red);
    等价于
    background-image: linear-gradient(green 0%,red 100%);
    
    background-image: linear-gradient(green,red，pink);
    等价于
    background-image: linear-gradient(green 0%,red 50%,pink  100%);
    1
    2
    3
    4
    5
    6
    7

  • 渐变至少需要写两个色标，如果色标中首尾两个默认不写，是0%和100%；

  • 当然也可以自己定义位置值：

      background-image: linear-gradient(red 50%,green 80%,yellow 90%);  
    1

    如果渐变有三个值，第一个值位置设置50%，第二个设置80%，第三个设置90%，0%-50%默认第一个种颜色的纯色，50%-80%是第一种颜色到第二颜色的渐变，80%-90%是第二种颜色到第三种颜色的渐变，90%-100%是第三种颜色的纯色。

  • 色标可以无数个，可以设置多种颜色

重复线性渐变

可以实现线性渐变的重复效果，使色标在渐变盒子中按照方向径向无限重复。

注意: 起始值必须是0开始

• 语法：

  background-image:repeating-linear-gradient(red 0%,green 20%);
  1

练习：

兼容问题

 /* 针对chrome或者safira识别 */
background-image: -webkit-linear-gradient(red,green);
/* 针对firefox */
background-image: -moz-linear-gradient(red,green);
/* 针对opera */
background-image: -o-linear-gradient(red,green);
/* 针对ie浏览器识别的前缀 */
background-image: -ms-linear-gradient(red,green);
/* 通用的样式 */
background-image: linear-gradient(red,green);
1
2
3
4
5
6
7
8
9
10

出现前缀的原因：W3c没有发布正式规范时，发布草案里提出新属性，各个厂商为了和之后发布的正式规范区分，就将自己的添加前缀来进行区分。当规范发布以后，各个浏览器就会逐步使用w3c规范的属性。

ie9及以下浏览不支持线性渐变（使用ie提供渐变滤镜）

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ff0000ff', endColorstr='#ffff00ff');
1

• GradientType：代表渐变的方向，0代表垂直方向，1代表水平方向，只有两个方向。
• startColorstr：代表开始颜色，endColorstr代表结束的颜色
• #ff0000ff：代表颜色，格式是#aarrggbb aa代表透明度 rrggbb代表十六进制

照片滤镜

**注意：**background-image可以同时引入图片和渐变，中间使用逗号隔开，写在前面的盖住后面的，可以实现照片滤镜的效果

.box{
            width: 500px;
            height: 319px;
            border: 1px solid red;
            /* background-image: url(img/gyy.jpg);
            background-image: linear-gradient(transparent , red); */
            /* background-image可以同时引入图片和渐变,中间用逗号隔开，前面会盖住后面的 */
            background-image: linear-gradient(transparent ,red),url(img/gyy.jpg);
        }

        
    
1
2
3
4
5
6
7
8
9
10
11
12

 background-image:linear-gradient(rgba(255,255,255,0.5 ),rgba(255,255,255,0.8)),url("./img/gyy.jpg");
1

透明度

• opacity:设置盒子透明度，取值0-1 ，0代表完全透明，1代表不透明
  • 设置0时，当前盒子本身的效果和里面的所有元素都会透明
  • 设置0时，盒子完全透明，但是盒子还在原来的位置不变
• rgba():设置颜色的透明度，a代表透明，取值0-1 ，0代表完全透明，1代表不透明
  • rgba只作用于当前的属性的颜色透明
• transparent：颜色完全透明

径向渐变

径向渐变其实就是椭圆渐变，圆是一种特殊的椭圆。径向渐变从圆心出发，沿着半径径向渐变，以椭圆的形式向外径向发散出去。

径向渐变无法实现ie兼容，只有ie10以上 支持标准写法

径向渐变由两部分构成：

• 椭圆：用来控制径向渐变的大小，形状，位置。

• 色标：每个色标都包含一个颜色和一个渐变位置，用来控制渐变颜色变化

• 标准语法：

  background-image:radial-gradient(  大小   形状  at  x轴  y轴，色标1，色标2 )
  1

圆心

默认值center center，盒子的中心点

 /* 圆心 通过at来控制圆心的位置 其中0px 0px 盒子的左上角，center center是默认值，中心点*/
            /*
background-iamge:radial-gradient(at x轴  y轴,red,green)
1
2
3

• x轴：left | |right | center |像素 | 百分比
• y轴：top | center | bottom | 像素 | 百分比

形状

• ellipse：椭圆，默认值，
• circle：正圆

大小

​ 通常需要搭配圆心位置来调整

• farthest-corner：默认值，半径从圆心到最远角
• closest-corner：半径从圆心到最近角
• farthest-side：半径从圆心到最远边
• closest-side：半径从圆心到最近边

重复径向渐变

background-image:repeating-radial-gradient(red 0% ,green  30%);
1

• 注意，色标的首尾不能同时在0%和100%的位置，要留空间给渐变重复

•       
    
    
        
  
    
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14

  练习2：

  

阴影

盒子的阴影

box-shadow设置盒子的阴影，IE对属性兼容不是很好

• 语法

  
  box-shadow:X轴的偏移量  Y轴的偏移量  阴影效果虚化程度   阴影大小   颜色 
  box-shadow:10px       10px           20px           20px    rgba(0,0,255,0.5);
  
  设置两个值，阴影效果和阴影大小可以默认不写 
  box-shadow:10px 10px rgba(0,0,255,0.5);
  
  /inset将外部阴影 (outset) 改为内部阴影 
  box-shadow:10px 10px rgba(0,0,255,0.5) inset;
  1
  2
  3
  4
  5
  6
  7
  8
  9

• box-shadow可以设置多层阴影，多层阴影中间使用逗号隔开

•   box-shadow:10px 10px 20px 20px rgba(0,0,255,0.5),
    	-10px 10px 20px 20px rgba(255,0,255,0.5),
    	10px -10px 20px 20px rgba(255,0,0,0.5);
  1
  2
  3

例如：

    
     

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

文字阴影

text-shadow设置文字阴影

• 语法：

  text-shadow：x轴偏移量   y轴偏移量  阴影虚化程度  颜色；
  text-shadow:2px         3px       5px         red;
  1
  2

.box{
            width: 350px;
            height: 150px;
        
            font-size: 50px;
            /* 文字阴影 X轴的偏移量   Y轴的偏移量   阴影效果虚化程度0~无穷   颜色 ;*/
            /* text-shadow: 5px 10px 2px red; */
           
            text-shadow: 1px 1px 2px black,-1px -1px 2px white; /* 凸起的文字 */
            color:slategray;
            background-color: slategray;
            float: left;

        }
        .box2{
            width: 400px;
            height: 150px;
            /* border: 1px solid red; */
            font-size: 50px;
            /* 文字阴影 X轴的偏移量   Y轴的偏移量   阴影效果虚化程度0~无穷   颜色 ;*/
            /* text-shadow: 5px 10px 2px red; */
            text-shadow: -1px -1px 2px black,1px 1px 2px white; /* 凹陷的文字 */
            color:slategray;
            background-color: slategray;
            float: left;

        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

-webkit-box-reflect 倒影

• 概念：实现图片的倒影

• 语法：

  box-reflect:倒影方向  倒影和图片之间的距离 [可添加渐变效果]
  1

  • above：指定倒影在对象的上边（倒影和内容重叠）
  • below：指定倒影在对象的下边
  • left：指定倒影在对象的左边
  • right：指定倒影在对象的右边

• 注意：

  • box-reflect 目前就谷歌有实现，并且该css属性在谷歌中使用需加收-webkit- 前缀

-webkit-box-reflct 可以设置图片倒影，并不是所有浏览器都支持，chrome可以使用

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <style>
   html,body{margin:50px 0;}
.reflect{width:950px;margin:0 auto;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
font:bold 100px/1.231 georgia,sans-serif;text-transform:uppercase;}
style>
head>
<body>
<div class="reflect">你看到倒影了么？<img src="img/gyy.jpg" alt="">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

圆角

• border-radius设置圆角

• 取值

  简写形式：水平半径和垂直半径默认是相等的
  一个值：四个角
  border：10px；  
  两个值：左上右下   右上左下
  三个值：左上   右上左下  右下
  四个值：左上  右上   右下   左下
  
  标准写法：
  /前面代表四个方向的水平半径，/后面代表四个方向的垂直半径
  border-radius：10px  10px  10px  10px  / 10px 10px 10px 10px;
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

水平半径和垂直半径

原理：

水平半径和垂直半径一起绘制了圆角的弧度，每个盒子都有四个角，每个角可以单独控制它圆弧程度

水平半径和垂直半径共同形成了圆弧

内半径和外半径

当border-radius的值小于boder时，我们边框内部没有圆角效果，

当border-radius的值大于border时，边框里面和外部的圆角不一样，外部采用设置的圆角半径大小，这个圆角半径称为外半径，里面采用border-radius减去border的宽度作为半径来绘制圆弧，这个半径称为内半径。

内半径 = 外半径 - border

圆角应用

• 胶囊的绘制：前提条件，盒子的宽高不一样，border-radius取宽高最小值的一半以上
• 绘制正圆：盒子宽高一样，设置border-radius：50%；
• 绘制椭圆：盒子宽高不一样，设置border-radius：50%；

当border-radius的值小于boder时，我们边框内部没有圆角效果，

当border-radius的值大于border时，边框里面和外部的圆角不一样，外部采用设置的圆角半径大小，这个圆角半径称为外半径，里面采用border-radius减去border的宽度作为半径来绘制圆弧，这个半径称为内半径。

内半径 = 外半径 - border

圆角应用

• 胶囊的绘制：前提条件，盒子的宽高不一样，border-radius取宽高最小值的一半以上
• 绘制正圆：盒子宽高一样，设置border-radius：50%；
• 绘制椭圆：盒子宽高不一样，设置border-radius：50%；