数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用CSS设置内阴影？
通常，我们使用`box-shadow`属性在任何盒子或容器周围应用阴影。CSS中的`box-shadow`属性默认情况下会在容器边界外部应用阴影。但是我们也可以使用`box-shadow`属性来设置容器内部的阴影。
让我们看看如何使用`box-shadow`属性来为容器设置内阴影并使其看起来更具吸引力。
语法
我们可以使用`box-shadow`属性的不同数量的值来实现不同的目的，如下面的语法所示：
box-shadow: x-offset y-offset blur spread color | initial | inherit | inset
根据上面显示的语法，我们可以使用名为`inset`的值与`box-shadow`属性一起使用。此`inset`属性值允许我们也使用内阴影来设置盒子样式。
现在让我们通过实际使用代码示例来了解如何使用`box-shadow`属性来设置内阴影。
步骤
步骤1 - 在第一步中，我们将定义一个带有关联类的外部父div。
步骤2 - 在下一步中，我们将在最后一步中定义的元素内定义两个带有关联类的子元素。
步骤3 - 在最后一步中，我们将获取上面定义的div元素及其各自的类，并应用如上语法所示的`box-shadow` CSS。
示例
下面的示例将帮助您理解`box-shadow`属性在应用内阴影方面的实际实现：
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div{
display: flex;
border: 2px solid red;
box-shadow: 5px 5px 8px 0 green, -5px -5px 8px 0 green;
}
.inner-shadow{
border: 1px solid green;
margin: 5px;
padding: 10px;
box-shadow: inset 5px 5px 8px 0 rgba(0, 0, 0, 0.3), inset -5px -5px 10px 0 rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<center>
<h2>Setting the inset shadow using CSS</h2>
<p>The below div elements contain different type of box shadows. The main parent div contains the box shadow outside, while both of its child elements contain inner box shadow.</p>
<div class = "outer-div">
<div class = "inner-shadow">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</div>
<div class = "inner-shadow">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</div>
</div>
</center>
</body>
</html>
在上面的示例中，我们使用了带和不带`inset`值的`box-shadow`属性。包含`inset`值的元素的阴影将设置在其容器内部，而不包含`inset`值的元素的阴影则在其外部。
现在让我们讨论另一个代码示例，其中内阴影将更清晰地显示给用户。
方法
此示例的方法与之前的示例非常相似。您只需要删除一些定义所有容器周围边框的CSS代码和定义父容器周围阴影的`box-shadow`属性。
示例
下面的示例将向您解释如何使用`box-shadow`属性设置内阴影：
<!DOCTYPE html>
<html>
<head>
<style>
.outer-div{
display: flex;
background-color: #d0d0d0;
}
.inner-shadow{
margin: 5px;
padding: 10px;
border-radius: 5px;
box-shadow: inset 5px 5px 8px 0 rgba(0, 0, 0, 0.5), inset -5px -5px 10px 0 rgba(255, 255, 255, 0.8);
}
</style>
</head>
<body>
<center>
<h2>Set the inset shadow using CSS</h2>
<p>The below div elements contain different type of box shadows. The main parent div contains the box shadow outside, while both of its child elements contain inner box shadow.</p>
<div class = "outer-div">
<div class = "inner-shadow">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</div>
<div class = "inner-shadow">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</div>
</div>
</center>
</body>
</html>
在上面的示例中，我们仅使用`inset`值使用了`box-shadow`属性，这将为容器的子元素设置内阴影。我们使用了两个逗号分隔的值，分别定义了左上和右下方的阴影。
结论
在本文中，我们学习了CSS中的内阴影属性。我们借助两个不同的代码示例详细讨论了此属性在设置内阴影中的用法。在这两个示例中，我们都使用了带有`inset`值的`box-shadow`属性，这将把给定的阴影设置为容器内部，并更改将阴影设置为外部的默认行为。
154 次浏览
