今天看到阿呆日记（dai.ge）网站头部设计的很好看，点开源码看来下原来是用了css中的box-shadow，本来想直接拿来用到自己的网站上，想了下还是放弃了，还是自己好好学下，弄个属于自己的样式。
box-shadow 是一个 CSS 属性，用于给元素添加阴影效果。它可以让你在元素的边框之外产生一个或多个阴影，从而增强页面的视觉效果，每个阴影效果之间用逗号分隔。box-shadow属性可以设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色
参数说明：
h-offset：水平偏移量，表示阴影相对于元素的水平位置。正值表示阴影在元素的右侧，负值表示阴影在元素的左侧。
v-offset：垂直偏移量，表示阴影相对于元素的垂直位置。正值表示阴影在元素的下方，负值表示阴影在元素的上方。
blur-radius（可选）：模糊半径，表示阴影的模糊程度。值越大，阴影越模糊。默认值为 0，表示阴影边缘清晰。
spread-radius（可选）：扩展半径，表示阴影的大小。正值表示阴影比元素大，负值表示阴影比元素小。默认值为 0，表示阴影与元素大小相同。
color：阴影的颜色。可以使用颜色名称、十六进制、RGB 或 RGBA 值。
inset（可选）：内阴影。设置为 inset 时，阴影会在元素内部显示。默认值为 outset，表示阴影在元素外部显示。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow 实例</title>
<style>
.box {
/* 定义矩形元素的基本样式 */
width: 200px;
height: 200px;
background-color: #f0f0f0;
margin: 50px;
padding: 20px;
border: 1px solid #ccc;
text-align: center;
line-height: 200px;
font-size: 20px;
color: #333;
}
.box-shadow-example {
/* 定义 box-shadow 属性的具体参数 */
/* 10px：水平偏移量，表示阴影相对于元素的水平位置 */
/* 10px：垂直偏移量，表示阴影相对于元素的垂直位置 */
/* 5px：模糊半径，表示阴影的模糊程度 */
/* rgba(0, 0, 0, 0.5)：阴影的颜色，这里使用了半透明的黑色 */
/* inset：内阴影，设置为 inset 时，阴影会在元素内部显示 */
box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5) inset;
}
</style>
</head>
<body>
<div class="box">
这是一个普通的矩形元素
</div>
<div class="box box-shadow-example">
这是一个带有 box-shadow 的矩形元素
</div>
</body>
</html>
本文著作权归作者 [ 吹牛部落 ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。