H5 文字阴影效果和盒子阴影效果

文字阴影效果

使用text-shadow: 1px 2px 3px red;

1px代表水平方向移动的数值可以为负数

2px代表垂直方向移动的数值可以为负数

3px代表模糊度

red代表阴影颜色

如果有多个阴影可以用逗号分隔开

css:

p{

            font-size: 50px;

            text-align: center;

            /* color: red; */

            /* 前两个数值为水平方向和垂直方向数值可以为负值  第三个为模糊距离 第四个模糊颜色 */

            text-shadow: 7px 3px 5px rgb(82, 82, 248);

        }

body:

<p>天</p>

盒子阴影效果：

css:

.box{

            width: 500px;

            height: 500px;

            background-color: skyblue;

            box-shadow: 10px 6px 10px 5px orange;

            margin: 0px auto 150px;

            /* color: orangered; */

        }

body:

<div class="box">1111</div>

box-shadow:1px 2px 3px 4px red inset;

1px代表水平移动数值

2px代表垂直移动数值

3px代表模糊度

4px代表阴影的延伸半径

red代表阴影颜色

inset代表的内阴影 默认为外阴影outset