带有 CSS 的图像的圆形阴影答案

【问题标题】：Round shadow for image with CSS带有 CSS 的图像的圆形阴影
【发布时间】：2014-05-09 16:11:12
【问题描述】：

我想为图片创建一个圆形阴影并为 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);
      }

感谢您的支持！

【问题讨论】：

毕竟，我发现阴影在页面底部。谢谢大家

标签： css image rounding shadow

【解决方案1】：

如果你想使用相同的代码，那么你可以这样做。

HTML：

<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <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>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <asp:Image ID="Image1" CssClass="box" ImageUrl="YourImagePath" runat="server" />       
    </div>
     <div >
         <asp:Button CssClass="box" ID="Button1" runat="server" Text="Button" />
    </div>
    </form>
</body>

请根据需要更改宽度和高度。我希望这对你有用。

【讨论】：

【解决方案2】：

图像元素不允许在其中放置伪元素，因此您必须将图像放置在 div 中，然后对其应用样式。

【讨论】：

【解决方案3】：

好的，创建一个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>

就是这样。

【讨论】：

毕竟我发现阴影在页面底部。

【解决方案4】：

将图像放在框内，这应该会为图像创建阴影。

 <div id='DIV' class='box'>
    <img src='imgsrc' /> <!-- place your image here -->
 </div>

【讨论】：