CSS——阴影

一、设置文字阴影—— text-shadow

<h1>article</h1>
<style>
    h1{
        text-shadow: 1px 5px 5px rgba(26, 23, 23, 0.7);
        /* x方向阴影的位移，y方向上阴影的位移， 阴影的模糊程度，阴影的颜色和其透明度*/
    }
</style>

二、给块元素上阴影——box-shadow

https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

    .box{
        background: #2980b9;
        position: absolute;
        box-shadow: 10px 10px 10px 20px rgba(0, 0, 0, .5);
        /* 设置阴影效果 , 第四个参数表示的是阴影的大小，其他参和上面的一样*/

    .box{
        box-shadow: 10px 10px 10px 20px rgba(0, 0, 0, .5) inset;
        /* 设置阴影效果 , 第一个参数表示的是阴影的大小*/
    }

加上 insert （默认为outset），将阴影由外部转为内部。

利用好阴影，可以让设计产生更加高级的“质感”。

待续！！！~~~