盒子阴影(box-shadow)和文字阴影（text-shadow）

最新推荐文章于 2024-07-18 15:09:36 发布

一条程序○

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量2.6k

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/yizhichen_xuyuan/article/details/125346679

版权

一、盒子阴影：

书写语法：box-shadow: inset h-shadow v-shadow blur-radius color;
inset 阴影类型为内阴影
outset 阴影类型为外阴影（不添加时默认为外阴影，但是添加后反而会使得阴影无效，所以如果要想实现外阴影可以不加）
h-shadow----- 阴影的水平位移量允许为负值
v-shadow----- 阴影垂直位移量允许为负值
blur-radius-----阴影模糊半径即阴影向外模糊的模糊范围值越大越模糊
color----- 阴影颜色，定义绘制阴影时所使用的颜色

例如：（配合hover效果实现）

<!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>Document</title>
    <style>
        body{
            background-color: #007aff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .wrap{
            position: relative;
            width: 300px;
            height: 400px;
            border-radius: 40px;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5) inset,-5px -5px 15px rgba(255, 255, 255, 0.5) inset,5px 5px 15px rgba(0, 0, 0, 0.5) inset,5px 5px 15px rgba(0, 0, 0, 0.5) inset;
        }
        .wrap::after{
            display: block;
            content: "";
            clear: both;
            position: absolute;
            background-color: white;
            border-radius: 35px;
            inset: 5px;
            transition: 1s;
        }
        .wrap:hover::after{
            cursor: pointer;
            transform: translate(40px,-40px);
            box-shadow: -30px 30px 50px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

实现效果：

盒子阴影+hover效果

二、文字阴影：

书写语法：text-shadow: h-shadow v-shadow blur color;
h-shadow -----

水平阴影的位置，允许负值
v-shadow -----垂直阴影的位置，允许负值
blur-----模糊的距离（如果设置的是0，那么将和正常的文字清晰度一样）
color------阴影的颜色

例如：

<!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>Document</title>
    <style>
        .wrap{
            font-size: 100px;
            text-align: center;
            background-color: #007aff;
        }
        .wrap::after{
            display: block;
            content: "哒哒哒";
            clear: both;
            color: white;
            text-shadow:
                        0px -1px 0px #c0c0c0,
                        0px -2px 0px #b0b0b0,
                        0px -3px 0px #a0a0a0,
                        0px -4px 0px #909090,
                        0px -5px 0px #c0c0c0,
                        0px -6px 0px #b0b0b0,
                        0px -7px 0px #a0a0a0,
                        0px -8px 0px #909090,
                        0px -9px 10px rgba(0, 0, 0, 0.6);
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>
</html>

实现的效果为：