Question

我想为图像和CSS按钮创建一个圆形阴影，我在CSS3 Drop Shadows Generator中找到了一个为框创建圆形阴影的解决方案。

enter image description here

但我不知道如何为我的案例应用代码（对于图像和按钮）

.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);
      }

您的支持将不胜感激！

Answer 1

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

多数人。

Answer 2

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

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

Answer 3

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

Answer 4

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

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>

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

用CSS的图像的圆形阴影

4 个答案: