box-shadow的使用

最新推荐文章于 2024-07-26 08:45:03 发布

KjPrime

最新推荐文章于 2024-07-26 08:45:03 发布

阅读量694

点赞数 1

分类专栏： web 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45019494/article/details/127391620

版权

web 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS box-shadow属性的各个参数，包括x-shadow和y-shadow控制偏移，blur设置模糊效果，spread调整阴影范围，color指定颜色，position区分内外阴影。通过实例演示了如何灵活运用这些参数来创建丰富的视觉效果。

摘要由CSDN通过智能技术生成

box-shadow简介

box-shadow: x-shadow y-shadow blur spread color position;

属性	解释
x-shadow	必需的，水平方向偏移的距离，正数则向右，负数向左
y-shadow	必需的，垂直方向偏移的距离，正数则向下，负数向上
blur	可选，阴影向内的模糊半径，正数有效，负数无效（默认0）
spread	可选，阴影向外的拓展半径，正数放大，负数缩小（默认0）
color	可选，阴影的颜色值（默认黑色）
position	可选，外阴影（默认不填）和内阴影（inset）

属性介绍

初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
        }
        .box-shadow{
            width: 300px;
            height: 300px;
            background-color: #c04851;
        }
    </style>
</head>
<body>
    <div class="box-shadow">
    </div>
</body>
</html>

x-shadow y-shadow

代码需改如下所示，得到的效果图如下图所示；

        .box-shadow{
            width: 300px;
            height: 300px;
            background-color: #c04851;
            /* 添加的代码1 */
            box-shadow: 100px 100px;
        }

我的理解就是一个长宽都为300px的父盒子分出一个一模一样的副本，向右平移了100px，向下平移了100px。也就是x-shadow y-shadow就是水平和垂直的移动的大小，正负号控制方向。

blur

代码需改如下所示，得到的效果图如下图所示；

        .box-shadow{
            width: 300px;
            height: 300px;
            background-color: #c04851;
            /* 修改的代码1 */
            box-shadow: 100px 100px 40px;
        }

我的理解就是该副本矩形向内产生模糊。

spread

代码需改如下所示，得到的效果图如下图所示；

        .box-shadow{
            width: 300px;
            height: 300px;
            background-color: #c04851;
            /* 修改的代码1 */
            box-shadow: 100px 100px 40px 100px;
        }

我的理解就是该副本矩形向外拓展了100px的大小（也就是向上下左右延长100px）。

color

这个没有什么好说的，就是颜色罢了。

position

这个属性，如果不写，就是默认外阴影，如果需要内阴影，只需要写上inset就好；
代码需改如下所示，得到的效果图如下图所示；

        .box-shadow{
            width: 300px;
            height: 300px;
            background-color: #c04851;
            /* 修改的代码1 */
            box-shadow: 100px 100px 0px 100px inset;
        }