怎样用 box-shadow 让 div 上边呈现内阴影、其余三边呈现外阴影

技术文摘

2025-01-09 17:09:54 小编

在网页设计中，阴影效果可以为元素增添立体感和层次感，提升用户体验。本文将介绍如何使用CSS的box-shadow属性让div元素的上边呈现内阴影，其余三边呈现外阴影。

我们需要了解box-shadow属性的基本语法。box-shadow属性接受多个值，用于定义阴影的偏移量、模糊半径、扩展半径、颜色等。其基本语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

其中，h-shadow和v-shadow分别表示阴影的水平和垂直偏移量，blur表示模糊半径，spread表示扩展半径，color表示阴影颜色，inset表示内阴影。

要实现div上边呈现内阴影、其余三边呈现外阴影的效果，我们可以使用多个box-shadow值来叠加。以下是一个示例代码：

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
   .box {
      width: 200px;
      height: 200px;
      background-color: #fff;
      box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, 0.5) inset, 
                  0 5px 5px -5px rgba(0, 0, 0, 0.5), 
                  5px 0 5px -5px rgba(0, 0, 0, 0.5), 
                  -5px 0 5px -5px rgba(0, 0, 0, 0.5);
    }
  </style>
  <title>Box Shadow Example</title>
</head>

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

</html>

在上述代码中，我们首先定义了一个名为.box的类，用于设置div元素的样式。在box-shadow属性中，我们使用了四个值来分别设置上边的内阴影和其余三边的外阴影。

第一个值0 -5px 5px -5px rgba(0, 0, 0, 0.5) inset表示上边的内阴影，其中0表示水平偏移量为0，-5px表示垂直偏移量为-5px，即向上偏移5px，5px表示模糊半径为5px，-5px表示扩展半径为-5px，rgba(0, 0, 0, 0.5)表示阴影颜色为黑色，透明度为0.5，inset表示内阴影。

其余三个值分别表示下边、右边和左边的外阴影，设置方法类似，只是没有inset关键字。

通过以上方法，我们可以轻松地使用box-shadow属性让div上边呈现内阴影、其余三边呈现外阴影，为网页元素增添独特的视觉效果。

TAGS: div元素 box-shadow属性内阴影实现外阴影实现

万千站长工具

技术文摘

怎样用 box-shadow 让 div 上边呈现内阴影、其余三边呈现外阴影

欢迎使用万千站长工具！