【HTML+CSS】文本阴影、盒子阴影

文本阴影

语法：text-shadow：水平偏移 垂直偏移 模糊程度 颜色;

• 水平偏移、垂直偏移必须写
• 属性值是有顺序的
• 模糊程度不能写负值
• 颜色默认是文本颜色
• 多阴影用逗号隔开

<style>
       div{
        height: 200px;
        width: 200px;
        background-color: black;
        text-align: center;
        line-height:  200px;
       }
       h1{
        font-weight: normal;
        font-size: 60px;
        color: #FFFFFF;
        text-shadow:0px -5px 4px#FBF75B, 0px -11px 5px orange,0px -18px 12px red;
       }
</style>
    <div>
        <h1>火</h1>
    </div>

💡执行结果截图

盒子阴影

语法：box-shadow：水平偏移 垂直偏移 模糊程度 阴影大小 颜色 内阴影inset;

• 水平偏移、垂直偏移必须写
• 模糊程度不能写负值
• 阴影大小默认为盒子大小 颜色默认为文本颜色
• 多阴影用逗号隔开

<style>
        div{
            width: 300px;
            height: 100px;
            background-color: pink;
            margin: 100px;
            color: blue;
            /* box-shadow: 30px 30px; */
            /* box-shadow: 30px 30px 10px; */
            /* box-shadow: 0px 0px 10px 10px; */
            /* box-shadow: 0px 0px 10px 10px red; */
            /* box-shadow: 0px 0px 10px 10px red inset; */
            box-shadow: 0px 0px 10px 10px red inset, 0px 0px 10px 10px orange;
        }
</style>

💡执行结果截图