数据结构
网络
关系数据库管理系统(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.com/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.com/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.com/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.com/images/logo.png')
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
运行上述程序后，将弹出输出窗口，显示上传到网页上的图像，看起来更暗。当用户尝试将光标放在图像上时，它将失去其效果，看起来像普通图像。
更新于：2023年9月26日
1K+ 次浏览
广告