技术文摘
怎样用 box-shadow 让 div 上边呈现内阴影、其余三边呈现外阴影
怎样用 box-shadow 让 div 上边呈现内阴影、其余三边呈现外阴影
在网页设计中，阴影效果可以为元素增添立体感和层次感，提升用户体验。本文将介绍如何使用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属性 内阴影实现 外阴影实现