Question

enter image description here 我正在创建一个应用程序，我正在使用div来显示信息，并使用一些jQuery来操作它们。在我的应用程序中，我想给我的div提供一个盒子阴影，并尝试做一个专业的外观。我已经为我的div创建了盒子阴影，但它看起来并不专业。我正在使用此链接准备我的应用程序。 Refence UI

现在我想创建与该应用程序中的Summary div完全相同的个人信息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%;
}

My sample code

现在有人可以帮助我使我的div与该应用程序完全相同吗？或者如果不可能那么如何只在底部制作盒子阴影？有人请帮忙。

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我在这里使用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

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

2 个答案: