javascript - 如何使用css在div中创建职业框阴影效果

Question

我正在创建一个应用程序，我在其中使用 div 来显示信息并使用一些 jQuery 来操作它们。在我的应用程序中，我想给我的 div 提供框阴影并尝试制作专业的外观。我已经为我的 div 创建了框阴影但它看起来并不那么专业。我正在使用此链接准备我的申请。 Refence 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%;
}

My sample code

现在谁能帮助我使我的 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>