CSS实现div上边框内阴影且其他三边外阴影的方法

技术文摘

2025-01-09 17:05:13 小编

在网页设计中，为元素添加阴影效果可以增强页面的层次感和立体感。本文将介绍如何使用CSS实现一个div元素上边框具有内阴影，而其他三边具有外阴影的效果。

我们需要创建一个基本的HTML结构。在HTML文件中添加一个div元素，作为我们要添加阴影效果的容器。例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>CSS阴影效果示例</title>
</head>
<body>
  <div class="shadow-box">
    这是一个带有特殊阴影效果的div元素。
  </div>
</body>
</html>

接下来，在CSS文件（styles.css）中编写样式。要实现上边框内阴影，可以使用 box-shadow 属性的 inset 关键字。以下是实现上边框内阴影的CSS代码：

.shadow-box {
  width: 300px;
  height: 200px;
  background-color: #fff;
  box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.5);
}

上述代码中，inset 表示内阴影，0 表示水平偏移量，5px 表示垂直偏移量，5px 表示模糊半径，-5px 表示阴影的扩展半径，rgba(0, 0, 0, 0.5) 表示阴影的颜色和透明度。

然后，要添加其他三边的外阴影，可以再次使用 box-shadow 属性，并结合逗号分隔多个阴影值。代码如下：

.shadow-box {
  width: 300px;
  height: 200px;
  background-color: #fff;
  box-shadow: inset 0 5px 5px -5px rgba(0, 0, 0, 0.5), 
              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);
}

这样，我们就成功实现了div元素上边框内阴影且其他三边外阴影的效果。通过合理调整 box-shadow 属性的参数，还可以进一步定制阴影的样式，以满足不同的设计需求。在实际应用中，这种阴影效果可以为页面元素增添独特的视觉效果，提升用户体验。

TAGS: CSS DIV样式内阴影外阴影

万千站长工具

技术文摘

CSS实现div上边框内阴影且其他三边外阴影的方法

欢迎使用万千站长工具！