带有 CSS 的图像的圆形阴影
sut*_*uti 2 css image rounding shadow
我想为图像创建一个圆形阴影和一个 CSS 按钮，我在CSS3 Drop Shadows Generator 中找到了一个解决方案，它为一个框创建圆形阴影。
但我不知道如何为我的案例应用代码（用于图像和按钮）
.box {
position: relative;
width: 400px;
height: 300px;
background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
}
.box:after {
position: absolute;
width: 64%;
height: 12%;
left: 18%;
border-radius: 50%;
z-index: -1;
bottom: 0%;
content: "";
box-shadow: 0 50px 24px rgba(0,0,0,0.24);
}
您的支持将不胜感激！
好的，创建一个 html 文档并粘贴以下代码：
<html>
<style type="text/css">
.box {
position: relative;
width: 400px;
height: 300px;
background-color: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 50px rgba(0,0,0,0.1) inset;
border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
}
.box:after {
position: absolute;
width: 64%;
height: 12%;
left: 18%;
border-radius: 50%;
z-index: -1;
bottom: 0%;
content: "";
box-shadow: 0 50px 24px rgba(0,0,0,0.24);
}
</style>
<body>
<div class="box">
<img src="img.jpg" />
</div>
</body>
<html>
您必须在 body 内创建一个 div 元素并将 .box 类分配给 div，如下所示：
<div class="box">
// put your content here (eg. image or text) and it will be inside the box
</div>
就这样。