資料結構
網路
關係資料庫管理系統(RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用HTML和CSS為影像應用發光效果
您可能在瀏覽大多數網站時看到過一些特殊效果，這些效果可能在游標懸停在各種影像上時顯示。我們將在本文中處理相同的效果。此類影像可以用作我們網站的卡片。
我們將在本文中執行的任務是使用HTML和CSS為影像應用發光效果。可以使用`box-shadow`屬性完成此任務。讓我們深入瞭解本文，以瞭解有關應用發光效果的更多資訊。
使用box-shadow屬性
`box-shadow`屬性允許您從幾乎任何元素的框架投射投影。如果在帶有投影的元素上設定了`border-radius`，則投影將採用相同的圓角。
語法
以下是`box-shadow`屬性的語法。
box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit;
為了更深入地瞭解如何使用HTML和CSS為影像應用發光效果，讓我們來看一下以下示例。
示例
在下面的示例中，我們將從本地主機上傳影像，並使用`box-shadow`屬性對其應用效果。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: 300px;
height: 150px;
margin-left: 60px;
border-radius: 10%;
}
.tutorial:hover {
box-shadow: 0 0 100px #00FF00;
}
</style>
</head>
<body>
<div class="container">
<img class="tutorial" src="https://tutorialspoint.tw/images/logo.png" alt="LOGO" />
</div>
</body>
</html>
執行上述程式碼後，它將生成一個包含網頁上影像的輸出。當用戶將游標放在影像上時，它會在影像的邊框上顯示效果。
示例
考慮以下示例，我們將使用負擴充套件半徑提及`box-shadow`屬性。
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background-color: #E5E8E8;
height: 40px;
width: 100px;
padding: 30px;
}
img {
border-radius: 15%;
width: 120px;
box-shadow: 0 8px 6px -2px #8E44AD;
}
</style>
</head>
<body>
<div id='tutorial'>
<img src='https://tutorialspoint.tw/images/logo.png' />
</div>
</body>
</html>
執行上述程式碼後，將彈出輸出視窗，在網頁上顯示影像，並顯示由負擴充套件半徑引起的影像一側的效果。
示例
讓我們來看一下下面的示例，我們將使用“inset”在影像內部應用效果。
<!DOCTYPE html>
<html>
<head>
<style>
.tutorial {
width: 350px;
height: 250px;
margin-left: 60px;
border-radius: 10%;
box-shadow: inset 0 0 60px #85C1E9;
}
</style>
</head>
<body>
<div>
<img class="tutorial" src="https://tutorialspoint.tw/images/logo.png">
</div>
</body>
</html>
執行上述程式碼後，它將生成顯示影像以及在網頁上應用的內陰影效果的輸出。
示例
以下示例顯示了當將游標放在影像上時如何關閉影像效果。
<!DOCTYPE html>
<html>
<head>
<style>
.image {
width: 800px;
height: 200px;
margin: 5px;
position: relative;
box-shadow: 0px 0px 10px (#52BE80, 80%);
background-size: cover !important;
&::after {
width: 100%;
height: 100%;
border-radius: 50px;
position: absolute;
content: '';
background: inherit;
}
&:hover::after {
transform: scale(0.5);
opacity: 0;
}
}
.image:nth-of-type(1) {
background: url('https://tutorialspoint.tw/images/logo.png')
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
執行上述程式後，將彈出輸出視窗，顯示上傳到網頁上的影像，看起來更暗。當用戶嘗試將游標放在影像上時，它將失去其效果，看起來像普通影像。
更新於：2023年9月26日
1K+ 次瀏覽
廣告