给盒子边框添加阴影

你好摸鱼

于 2024-07-17 12:46:46 发布

阅读量175

点赞数 2

分类专栏：前端文章标签： css css3 javascript

本文链接：https://blog.csdn.net/m0_66296057/article/details/140491783

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

基本语法

csselement {
box-shadow: h-offset v-offset blur-radius spread-radius color;
}

h-offset：水平偏移量。正值将阴影向右移动，负值向左移动。
v-offset：垂直偏移量。正值将阴影向下移动，负值向上移动。
blur-radius：阴影的模糊程度。值越大，阴影的边缘就越模糊。
spread-radius：阴影的大小。正值会增加阴影的大小，负值会减小阴影的大小。
color：阴影的颜色。

示例

假设你有一个<div>元素，你想要给它的边框添加阴影：

html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Example</title>
<style>
.box {
width: 200px;
height: 200px;
border: 2px solid black;
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75); /* 阴影在右下角，有一些模糊，不改变阴影大小 */
}
</style>
</head>
<body>

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

</body>
</html>

在示例中，.box类应用了一个box-shadow，该阴影在元素的右下角（h-offset和v-offset都为正值），有一定的模糊程度（blur-radius），并且阴影的大小没有改变（spread-radius为0），阴影的颜色是半透明的黑色（通过rgba颜色值设置）