如何使用css在div中创建专业盒子阴影效果

Question

我正在创建一个应用程序,我使用div来显示信息,并使用一些jQuery来操纵它们.在我的应用程序中,我想给我的div给盒子阴影,并试图做一个专业的外观.我已经创建了盒子阴影到我的div但它看起来并不专业.我正在使用此链接准备我的应用程序. 反思UI

现在我想创建我的个人信息div与该应用程序中的Summary div完全相同.我也发布了我的代码,到目前为止我已经完成了一个小提琴

#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与该应用程序完全相同吗？或者如果不可能那么如何只在底部制作盒子阴影？有人请帮忙.

Answer 1

我创建了与该应用程序背景完全相同的框。希望它可以帮助你。

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>