資料結構
網路
關係資料庫管理系統 (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 次瀏覽
