如何使用CSS创建DIV中的专业阴影效果

Question

如何使用CSS创建DIV中的专业阴影效果

5

在此输入图片描述我正在创建一个应用程序，使用div来显示信息，并使用一些jQuery来操作它们。在我的应用程序中，我想给我的div添加盒子阴影，以使其看起来更加专业。我已经为我的div创建了盒子阴影，但它看起来不是那么专业。我正在使用以下链接准备我的应用程序。参考UI

现在，我想创建与该应用程序中摘要div完全相同的个人信息div。我也发布了我在fiddle中完成的代码。

#personalInformation{
    font-size: 1em;
    border-bottom: 3px solid #98AFC7;
    border-top: 3px solid #98AFC7;
    border-left: 3px solid #98AFC7;
    border-right: 3px solid #98AFC7;    
    box-shadow: 10px 10px 5px;
    line-height: 0; 
    width: 45%;
}

我的示例代码

现在，有人能帮我让我的div与那个应用程序完全相同吗？如果不可能，那么如何只在底部制作盒子阴影？请有人帮帮我。

- lucifer

我修改了你的JSFiddle示例 http://jsfiddle.net/muq10yh3/1/ - Jonathan Anctil

我已经更新了你的JSFiddle示例：http://jsfiddle.net/cL7zwvzt/ - Usman Arshad

谢谢您的回答，但是您能帮我把背景做成那个应用程序的样子吗？ - lucifer

你能否明确一下你需要什么？是想要和应用程序里完全相同的信息框吗？ - Usman Arshad

让我们在聊天中继续这个讨论。 - lucifer

显示剩余3条评论

2个回答

0

我在这里提供了一个使用HAML和SCSS的示例。请点击编译按钮以检索渲染内容。这是一个非常简单的幻觉。背景阴影是柔和的黑色。如果您有任何问题，请告诉我。

HAML：

#my-box Hello World!

SCSS：

$background: #3D6CAD;
$soft-black-shadow: rgba(0,0,0,0.29);

html, body { width: 100%; height: 100%; background: $background; }

#my-box {
  float: none;
  height: 50px;
  width: 300px;
  margin: 0 auto;
  margin-top: 50px;
  padding-top: 20px;
  text-align: center;
  background: white;
  box-shadow: 0 2px 3px 1px $soft-black-shadow;
}

http://codepen.io/Stephn_R/pen/pJwdzB

你的JSFiddle所做的修改已经应用。

- Stephen Rodriguez

你能编辑我的 Fiddle 吗？那对我来说将非常有帮助。 - lucifer

已添加！请查看 :) - Stephen Rodriguez

在哪里添加这些 $background: #3D6CAD; 和 $soft-black-shadow: rgba(0,0,0,0.29);？它们不在 fiddle 中。 - lucifer

是的，我更改了代码片段。只需要更新背景阴影即可。SCSS变量只是指向您希望用于页面背景和阴影背景的颜色。 - Stephen Rodriguez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Usman Arshad · Accepted Answer

我已经创建了一个背景和那个应用程序完全相同的盒子。希望它能对您有所帮助。

html {
      font-size: 10px;
    }

    body {
      font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
      font-size: 100%;
      font-weight: 400;
      line-height: 1.42857143;
      background-color: #f4f4f4;
      color: #404040;
    }

    .content {
      float: left;
      width: 870px;
    }
      .content::after {
        content: "";
        clear: both;
        display: table;
      }

    .box {
      padding: 5px 15px;
      background: #fff;
      box-shadow: 0 1px 2px #c9c9c9;
      -moz-box-shadow: 0 1px 2px #c9c9c9;
      -webkit-box-shadow: 0 1px 2px #c9c9c9;
      border-radius: 2px;
      margin-bottom: 15px;
    }
    .box:hover {
      box-shadow: 0 2px 2px #bababa;
      -moz-box-shadow: 0 2px 2px #bababa;
      -webkit-box-shadow: 0 2px 2px #bababa;
    }
      .box h5 {
        font-size: 1.4rem;
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 1.1;
      }
      .box p {
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.5;
        margin: 0 0 10px;
      }

<div class="content">

  <div id="your-id" class="box">
    <div class="box-content">
      <h5>Caption</h5>
      <p id="your-id">Not Mentioned</p>
      <h5>Skills/Competencies</h5>
      <p id="your-id">Layout  ,CSS  ,JavaScript  ,jQuery  ,HTML5  ,WordPress  ,Web Design  ,Web Development  ,HTML  ,PHP  ,AJAX  ,Cross-browser Compatibility  ,CSS3  ,UI/UX  ,Expert Frontend Developer  ,Responsive Web Design  ,Website Development  ,Web 2.0  ,Dreamweaver  ,Web Applications  ,Image Manipulation  ,Drupal  ,MySQL  ,Web Application Design  ,Web Interface Design  ,SVG  ,Front-end Development            </p>
      <h5>Resumes</h5>
      <p id="your-id">not mentioned</p>
    </div>
  </div><!-- .box -->
  
</div>