css3-阴影、背景尺寸、渐变

css3.png

一、文字阴影text-shadow: X轴偏移量  Y轴偏移量  阴影模糊半径 阴影颜色

    
        
        
        
            #box{                height: 200px;                margin: 200px auto;                text-align: center;                font-size: 50px;                font-weight: bold;                
                text-shadow: 5px 5px 5px blue;
            }        
    
    
        
            今天天气真好！        
    

阴影01.jpg

可以设置多个阴影，参数之间用逗号分隔

    
        
        
        
            #box{                height: 200px;                margin: 200px auto;                text-align: center;                font-size: 50px;                font-weight: bold;                text-shadow: 5px 5px 5px blue,20px 20px 6px red;
            }        
    
    
        
            今天天气真好！        
    

阴影02.jpg

二、盒子阴影box-shadow: X轴偏移量  Y轴偏移量  阴影模糊半径 阴影颜色

    
        
        
        
            #box{                height: 200px;                width: 200px;                background-color: pink;                margin: 200px auto;                box-shadow: 10px 10px 10px red;
            }        
    
    
        
    

阴影03.jpg

可以设置多个阴影，参数之间用逗号分隔

    
        
        
        
            #box{                height: 200px;                width: 200px;                background-color: pink;                margin: 200px auto;                box-shadow: 10px 10px 10px red,20px 20px 10px blue;
            }        
    
    
        
    

阴影04.jpg

三、图片背景background-size

参数不同，效果不一

background-size: 600px 600px
**设置固定大小的图片背景 **

01.jpg

**
background-size: cover
等比例缩放图片到完全覆盖容器，背景图像有可能超出容器（此时背景全部被覆盖，但是背景图片的长或款可能会溢出容器）
**

02.jpg

background-size: contain;
完全包含图片，一端完全撑开，另一端等比例缩放

03.jpg

background-size: auto
背景图片真实大小

04.jpg

小知识：
background-position: center center；
保证图片拉伸后，视觉中心在最中间

四、线性渐变（IE9及IE9以下不支持）

为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

background:linear-gradient(角度, 颜色1, 颜色2, 颜色3)

根据角度 创建线性渐变
background: linear-gradient(60deg,red,yellow,green);

渐变1.jpg

background:linear-gradient(to 方向, 颜色1, 颜色2, 颜色3)

根据方向（可以设置两个方向,中间用空格隔开） 创建线性渐变
background: linear-gradient(to left,red,yellow,green);

渐变2.jpg

五、径向渐变（IE9及IE9以下不支持）

为了创建一个径向渐变，你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）

background: radial-gradient(颜色1,颜色2，等等，);

颜色结点均匀分布,注意可设置多个颜色
background:radial-gradient(pink, purple)

渐变.jpg

background: radial-gradient(颜色1 大小 ，颜色2  大小);

设置大小的的渐变
background: radial-gradient(pink 20px,purple 40px);

渐变 (2).jpg

background: radial-gradient(at 方向,颜色1，颜色2);

可以控制方向
background: radial-gradient(at left,pink,purple);

渐变 (3).jpg

background: repeating-radial-gradient( );

重复径向渐变

background: repeating-radial-gradient(pink,purple 50px);

渐变 (4).jpg

作者：范小饭_
链接：https://www.jianshu.com/p/a1b927dfcc23