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

css3.png

一、文字阴影

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                height: 200px;
                margin: 200px auto;
                text-align: center;
                font-size: 50px;
                font-weight: bold;
                /*text-shadow: X轴偏移量  Y轴偏移量  阴影模糊半径 */
                text-shadow: 5px 5px 5px blue;
            }
        </style>
    </head>
    <body>
        <div id="box">
            今天天气真好！
        </div>
    </body>
</html>

阴影01.jpg

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #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;
            }
        </style>
    </head>
    <body>
        <div id="box">
            今天天气真好！
        </div>
    </body>
</html>

阴影02.jpg

二、盒子阴影

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                height: 200px;
                width: 200px;
                background-color: pink;
                margin: 200px auto;
                box-shadow: 10px 10px 10px red;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

阴影03.jpg

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                height: 200px;
                width: 200px;
                background-color: pink;
                margin: 200px auto;
                box-shadow: 10px 10px 10px red,20px 20px 10px blue;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

阴影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

喜欢就点赞