如何仅在左右两侧设置阴影？

在本文中，我们将学习如何使用 CSS 创建一个仅在元素左右两侧显示的阴影效果。阴影效果常用于为网页元素添加深度和维度，但默认情况下，阴影会应用于所有四个侧面。在这里，我们将探索一些简单的方法来实现仅在侧面显示阴影。

什么是 CSS 中的阴影？

CSS 中的box-shadow 属性 用于在元素周围添加阴影效果。通过调整偏移量、模糊度和扩展等值，可以控制阴影的大小、方向和强度。

阴影的关键元素

  • 水平偏移量：控制阴影在水平方向上的位置。
  • 垂直偏移量：控制阴影在垂直方向上的位置。
  • 模糊半径：使阴影变得更柔和或更锐利。
  • 扩展半径：增加或减少阴影的大小。

逐步添加仅限侧面的阴影

  • 步骤 1 - 基本 HTML 结构：让我们从一个简单的 HTML 结构开始，应用阴影效果。
  • 步骤 2 - 使用 CSS 添加样式：现在，让我们添加 CSS 样式，仅在左右两侧应用阴影。

HTML 代码

创建一个结构，我们在其中将在左右两侧应用阴影。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Side-Only Box Shadow</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="box">Side-Only Box Shadow</div>
</body>

</html>

CSS 代码

关键 CSS 属性的解释

  • 水平偏移量：我们为左侧阴影设置 -5px，为右侧阴影设置 5px。这使得阴影仅位于侧面。
  • 模糊半径：将其设置为 10px 会为阴影添加柔和的效果。
  • 颜色：RGBA 颜色 rgba(0, 0, 0, 0.2) 使阴影略微透明。

自定义仅限侧面的阴影效果

您可以通过调整这些值来自定义仅限侧面的阴影。

box-shadow: -8px 0 12px rgba(0, 0, 0, 0.3), /* Left shadow */
8px 0 12px rgba(0, 0, 0, 0.3); /* Right shadow */

/* Basic Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Centering the Box */

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f0f0;
    font-family: Arial, sans-serif;
}

/* Box Styling */

.box {
    width: 300px;
    height: 200px;
    padding: 20px;
    background: green;
    text-align: center;
    box-shadow: 15px 0 15px -10px rgba(0, 0, 0, 0.75), -15px 0 15px -10px rgba(0, 0, 0, 0.75);
    /* Right shadow */
    font-size: 1.2em;
}

在左右两侧设置阴影的完整代码

以下是创建仅在左右两侧具有阴影的盒子的完整代码。

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Side-Only Box Shadow</title>
    <style>
        /* Basic Reset */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Centering the Box */

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* Box Styling */

        .box {
            width: 300px;
            height: 200px;
            padding: 20px;
            background: green;
            text-align: center;
            box-shadow: 15px 0 15px -10px rgba(0, 0, 0, 0.75), -15px 0 15px -10px rgba(0, 0, 0, 0.75);
            /* Right shadow */
            font-size: 1.2em;
        }
    </style>
</head>

<body>
    <div class="box">Side-Only Box Shadow</div>
</body>

</html>

输出


在本文中，我们学习了如何使用 CSS 创建一个仅在元素左右两侧显示的阴影效果。

REDUAN AHMAD
REDUAN AHMAD

内容撰写者 | 网页开发和 UI/UX 设计爱好者 | 清晰、引人入胜、经过 SEO 优化的见解

更新于： 2024 年 11 月 8 日

26 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告