数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 CSS 设置 div 的阴影颜色？
本文我们将学习如何使用 CSS 设置 <div> 元素的阴影颜色。就像我们观察到的每个物体都有阴影一样，我们也可以使用 CSS 为 <div> 元素创建任何颜色的阴影。您可能在浏览大多数网站时都看到过一些特殊效果。
让我们在本文中进一步了解如何使用 CSS 创建 <div> 的阴影颜色。这可以通过使用 `box-shadow` 属性来实现。
CSS `box-shadow` 属性
在 CSS 中，`box-shadow` 属性用于使元素的框架具有阴影般的外观。元素的框架与它用逗号分隔，并受各种效果影响。`box-shadow` 可以使用相对于元素的 X 和 Y 偏移量、模糊和扩展半径以及颜色来表征。
语法
以下是 CSS `box-shadow` 属性的语法。
box-shadow: h-offset v-offset blur spread color |none|inset|initial| inherit;
让我们来看一个例子，以便更好地理解如何使用 CSS 设置 <div> 的阴影颜色。
示例
在下面的示例中，我们将指定水平和垂直阴影。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 350px;
height: 124px;
padding: 10px;
background-color: #D2B4DE;
box-shadow: 12px 13px;
}
</style>
</head>
<body>
<div>Mahendra Singh Dhoni, commonly known as MS Dhoni, is a former Indian cricketer and captain of the Indian national team in limited-overs formats from 2007 to 2017 and in Test cricket from 2008 to 2014, who plays as a Wicket-keeper-Batsman.</div>
</body>
</html>
运行上述程序后，将生成一个包含应用了水平和垂直阴影的 div 文本的输出。
示例
考虑以下示例，我们将指定颜色以形成阴影。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 110px;
padding: 12px;
background-color: #E5E7E9;
box-shadow: 11px 12px #BB8FCE;
}
</style>
</head>
<body>
<div>Virat Kohli is an Indian international cricketer and the former captain of the Indian national cricket team who plays as a right-handed batsman for Royal Challengers Bangalore in the IPL and for Delhi in Indian domestic cricket.</div>
</body>
</html>
运行上述代码后，输出窗口将弹出，显示网页上带有应用阴影的文本。
示例
以下是一个示例，我们将使用模糊参数来定义模糊半径。数字越大，阴影越模糊。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 90px;
padding: 13px;
background-color: #D1F2EB;
box-shadow: 9px 12px 6px #5B2C6F;
}
</style>
</head>
<body>
<div>The lion is a large cat of the genus Panthera native to Africa and India. It has a muscular, broad-chested body; short, rounded head; round ears; and a hairy tuft at the end of its tail. </div>
</body>
</html>
运行上述代码后，将生成一个包含文本以及网页上应用的模糊阴影的输出。
示例
让我们考虑以下情况：我们将使用阴影的扩展半径，如果值为正，则阴影大小会增加；如果值为负，则阴影大小会减小。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 310px;
height: 90px;
padding: 15px;
background-color: #D1F2EB;
box-shadow: 12px 9px 7px 10px #DFFF00;
}
</style>
</head>
<body>
<div>The dog is a domesticated descendant of the wolf. Also called the domestic dog, it is derived from the extinct Pleistocene wolf, and the modern wolf is the dog's nearest living relative.</div>
</body>
</html>
运行上述代码后，输出窗口将弹出，显示文本以及阴影大小的增加，因为我们已使用正值指定了扩展半径。
更新于：2023年9月26日
163 次浏览
广告