html 圆角图片周边增加炫光效果完整代码
时间: 2024-11-12 13:13:53 浏览: 9
3张紫色花朵 炫光效果PPT背景图片.ppt
要在HTML中给图片添加圆角并外围加上炫光效果,通常我们会结合CSS来完成。这里是一个简单的示例,使用了`border-radius`属性来创建圆角,以及`:before`和`:after`伪元素配合`box-shadow`属性制作炫光效果。假设你的HTML结构如下:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
.glow-image {
display: inline-block;
position: relative;
overflow: hidden;
margin: 10px;
}
.glow-image img {
width: 100%;
height: auto;
border-radius: 50%; /* 设置圆角 */
}
.glow-image::before,
.glow-image::after {
content: "";
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
z-index: -1;
}
.glow-image::before {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.7);
}
.glow-image::after {
box-shadow: 0 0 20px rgba(255, 255, 255, 0.2), inset 0 0 30px rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div class="glow-image">
<img src="your_image_url.jpg" alt="图片描述">
</div>
</body>
</html>
```
将`src`替换为你实际的图片URL,并根据需要调整圆角大小、阴影颜色和透明度。
阅读全文